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

@iwasaki 35views 更新:2017年7月3日

トリッキーなことをしていなければ、よしなにしてくれますが、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

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません