如何从 React Native 的另一个屏幕更改 useState？答案

【问题标题】：How can I change useState from another screen in React Native?如何从 React Native 的另一个屏幕更改 useState？
【发布时间】：2021-08-03 12:36:50
【问题描述】：

我有一个带有两个选项卡的 bottomTabNavigator。在第一个选项卡中，我有一个 useState。在第二个选项卡中，我有一个按钮。这个按钮应该执行什么函数来改变第一个选项卡中的useState？

第一个标签：

export default function TabOneScreen() {

  const [num, setNum] = useState(0); 
  return (
    <View style={styles.container}>
      <Text>num={num}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

第二个标签：

export default function TabTwoScreen() {
  return (
    <View style={styles.container}>
      <Button onPress={"I don't know what should be there"} title="num+1" />
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

【问题讨论】：

标签： react-native use-state

【解决方案1】：

基本上，您需要有一个全局状态，现在有很多库，如 redux、recoil 等等。你也可以使用 React 的内置 Context API。

为简单起见，我提供了Jotai的示例

创建文件atom.js

import { atom } from 'jotai'

export const numberAtom = atom(0)

现在在标签一和标签二中都使用原子

import { useAtom } from 'jotai';
import { numberAtom } from './atom';

export default function TabOneScreen() {

  const [num, setNum] = useAtom(numberAtom); 
  return (
    <View style={styles.container}>
      <Text>num={num}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

import { useAtom } from 'jotai';
import { numberAtom } from './atom';

export default function TabTwoScreen() {
  const [num, setNum] = useAtom(numberAtom); 
  return (
    <View style={styles.container}>
      <Button onPress={()=> setNum(1)} title="num+1" />
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

别忘了安装jotai。

【讨论】：

【解决方案2】：

完成您正在做的事情的一种方法是使用 React.createContext 设置一个上下文来保存可以在两个屏幕之间共享的状态。

例如，您可以有一个 TabScreenContext 保存数字状态/setState 并将您的导航包装在 TabScreenContext.Provider 中。

然后您可以在每个屏幕中导入上下文以读取值并在您的 onPress 函数中更新它。

【讨论】：