React Nativeで画面を回転させた際に再描画させる方法

トリッキーなことをしていなければ、よしなにしてくれますが、positionの指定などを細かくやっている際に画面を回転させた際に再描画させる方法 は以下のようにします。

  constructor(props) {
    super(props);

    this.state = {
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
      half: Dimensions.get('window').width / 2,
    }

    this.onLayout = this.onLayout.bind(this);

  }

  onLayout(event) {
    this.setState({
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
      half: Dimensions.get('window').width /2 ,
    });
  }

  render() {
    return(
      <View 
        onLayout={this.onLayout}
        style={{width: this.state.width}}
      >
      </View>
    );
  }
}

画面を回転させることで onLayout メソッドが発動し、width,heightのstateが変わるので、再描画されます。

https://stackoverflow.com/questions/29914572/react-native-flex-not-responding-to-orientation-change

https://github.com/yamill/react-native-orientation/issues/3