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 道具以强制重新安装视图：

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" 元素。

也就是说，只有当您要清除的状态存储在子组件树中的有状态组件中时（例如 uncontrolled TextInput 没有其 value 道具组).

一个更简洁的解决方案是让你所有的子组件 controlled 这样你的组件的 UI 是它的 props 和状态的纯函数，并且简单地重置组件状态：

const initialState = {
  //...
}

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

Answer 2

我的方案是用redux让第二个页面刷新全局状态。然后在第一页（当你返回时），根据全局状态中元素的变化，使用 useEffect 刷新想要的数据。来自父（第一）页：

import { useSelector } from 'react-redux';
const contacts_update = useSelector( state => state.contact.profile)

useEffect(() => {
  loadContacts();
}, [contacts_update]);

Answer 3

您可以添加 // @refresh reset => https://reactnative.dev/docs/fast-refresh#tips

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

React Native - Whats the best way to remount / reset / reload a screen?

mount

reload

react-native