React Native - 什么是重新安装/重置/重新加载屏幕的最佳方式？

Question

在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>

谢谢

Answer 1

React中经常使用的hack是改变key组件的prop以强制重新安装视图:

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将断定前一个元素不再存在,因此它将被删除并创建"new"元素.

也就是说,只有当您要清除的状态存储在子组件树中的有状态组件中时(例如,没有设置其prop 的不受控制的 组件),这才会起作用.TextInputvalue

一个更干净的解决方案是控制所有子组件,以便组件的UI是它的道具和状态的纯函数,并简单地重置组件状态:

const initialState = {
  //...
}

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