如何在 React Native 中从另一个屏幕更改 useState？

Question

我有一个带有两个选项卡的 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',
  },
});

Answer 1

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

例如，您可以有一个包含数字 state/setState 的 TabScreenContext 并将您的导航包装在 TabScreenContext.Provider.

中

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

Answer 2

基本上，你需要有一个全局状态，现在有很多库，比如 redux、recoil 等等。您也可以使用 React 的内置上下文 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。

如何在 React Native 中从另一个屏幕更改 useState？

How can I change useState from another screen in React Native?

react-native

use-state