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

【问题标题】：React Native - Whats the best way to remount / reset / reload a screen?React Native - 重新安装/重置/重新加载屏幕的最佳方式是什么？
【发布时间】：2018-07-18 09:27:06
【问题描述】：

在 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-native reload mount

【解决方案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 会断定之前的元素不再存在，因此将其移除并创建“新”元素。

也就是说，这仅在您要清除的状态存储在子组件树中的有状态组件中时才有效（例如，没有 value 属性集的uncontrolled TextInput）。

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

const initialState = {
  //...
}

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

【讨论】：

所以你是说神奇的 React-Native 没有实现一个名为 refresh 或 reload 的函数？
使用stack navigation，如果我选择另一个屏幕并返回到这个屏幕，它会全部刷新..所有字段都是空的，一切都和新的一样。为什么不能通过 react 本身来实现！！
并不是他们不能实现这样的方法，而是他们不应该。您正在做的实际上是一种反模式，对于您所追求的，有更好的可能更好的解决方案。
在使用 React 的钩子和功能组件时，你如何实现这一点？
@xv8 我刚刚在我的项目中做了这个。相同的主体，保持你的 uniqueId 处于状态，当你关心时增加它，并将它添加到像这样 ... 的组件中

【解决方案2】：

我的解决方案是使用 redux 让第二页刷新全局状态。然后在第一页（当您返回时），使用 useEffect 根据全局状态中元素的更改来刷新想要的数据。从父（第一）页：

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

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

【讨论】：