web-dev-qa-db-ja.com

React Native-画面を再マウント/リセット/リロードする最良の方法は何ですか？

React-Nativeには、画面全体を再マウントまたは再ロードする方法がありますか？

電卓を作成していて、これに従う場合： https://facebook.github.io/react-native/docs/refreshcontrol.html

入力フィールドはまだリセットされません。もちろん、画面上のすべてのフィールドをリセットするコードを作成できますが、画面を更新するだけの一般的な方法はありますか？

たとえば、ナビゲータを使用して別の画面に移動してこの画面に戻ると、データはフィールドからすべて失われ、そのすべてが再び0.0になります。それを実現する方法は？

これがコンポーネントの最初のノードです。すべてがこの中にあります

<ScrollView refreshControl={<RefreshControl
refreshing={this.state.refreshing} onRefresh={this.refreshMe.bind(this)} />}
>
.
.
.
.
.
.
</ScrollView>

ありがとう

react-nativereloadmount
6
Raheel Hasan

React=でよく使用されるハックは、コンポーネントのkeyプロパティを変更して、ビューの再マウントを強制することです。

class Thing extends React.Component {
  state = {
    uniqueValue: 1
  }
  forceRemount = () => {
    this.setState(({ uniqueValue }) => ({
      uniqueValue: uniqueValue + 1
    });
  }
  render() {
    return (
      <View key={this.state.uniqueValue}>
        <Button onPress={this.forceRemount} />
      </View>
    )
  }
}

Reactは要素キーを使用して更新する要素を追跡します。キーが変更されると、Reactは前の要素が存在しないと判断し、削除されて「新しい」要素が作成されます。

ただし、これは、クリアしたい状態が子コンポーネントツリー内のステートフルコンポーネントに格納されている場合にのみ機能します（例： ncontrolledTextInputにvalue小道具セット）。

よりクリーンなソリューションは、すべての子コンポーネントを controlled にして、コンポーネントのUIがそのプロパティと状態の純粋な関数になり、コンポーネントの状態を単純にリセットすることです。

const initialState = {
  //...
}

class Thing extends React.Component {
  state = initialState;
  resetState = () => {
    this.setState(initialState);
  }
  render() {
    return (
      <View}>
        <Button onPress={this.resetState} />
      </View>
    )
  }
}
10
jevakallio