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中经常使用的黑客攻击是更改组件的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会断定前一个元素不再存在，因此它将被删除并且＆＃34; new＆＃34;元素创造。

也就是说，只有当您要清除的状态存储在子组件树中的有状态组件中时才会起作用（例如，uncontrolled TextInput没有value } prop set）。

更清晰的解决方案是制作所有子组件controlled，以便组件的UI完全支持它的道具和状态，并简单地重置组件状态：

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]);

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

2 个答案: