在另一个屏幕上显示更新的变量React Native

Question

我有一个ScreenOne.js文件，其中有一个名为points的变量，起始值为0。我在文件中也有一些函数，可以将值10添加到点上。

更新后的点变量显示在ScreenOne上，并且更新良好。我还想在一个名为ScreenTwo.js的屏幕上显示更新后的points变量，但这似乎是个问题。

我已经尝试将更新后的值存储在本地存储中，但它返回null。在这种情况下，我试图导出更新后的变量，但它返回的变量具有起始值，而不是更新后的值。

在ScreenTwo中传输和显示更新后的变量的最佳方式是什么？

屏幕一：

const ScreenOne = ({ navigation }) => {
let valuePoints = 0
module.exports.valuePoints = valuePoints;
if (userInput1.search('No') < 0) {
console.log('Wrong answer!')
} else {
valuePoints += 10
}
if (userInput2.search('Yes') < 0) {
console.log('Wrong answer!')
} else {
valuePoints += 10
}
return (
<ScreenContainer>
<ScrollView style={{ flex: 1, width: '100%' }}>
<PointsAmount>
{valuePoints}  //Here it displays 20
</PointsAmount>
</ScrollView>
</ScreenContainer>
)
}
export default ScreenOne;

屏幕二：

const ScreenTwo = ({ }) => {
const {valuePoints} = require('../screens/ScreenOne');
return (
<PointsContainer>
<ScrollView style={{flex:1, width: '100%'}}>
<TouchableOpacity onPress={() => navigation.navigate('MyTabs1')} >
<ScoreCard header='Points gained' points={valuePoints} goal={100} /> //Here it should display 20 but instead it displays 0
</TouchableOpacity>
</ScrollView>
</PointsContainer>
)
}
export default ScreenTwo;

Answer 1

您应该查看文档中react中的上下文。

您需要创建一个上下文来包装App。

const [points, setPoints] = useState(0);
<Context.Provider value={{points, setPoints}}>
Your app
</Context.Provider>

然后在您的ScreenOne和ScreenTwo中，您可以使用获取并设置值

const {
points, setPoints
} = useContext(Context);