时间戳

首页 > 解决方案 > 在另一个屏幕上显示更新的变量 React Native

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

问题描述

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

更新后的 points 变量显示在 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;

标签： javascriptreactjsreact-nativevariables

解决方案

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

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

const [points, setPoints] = useState(0);

<Context.Provider value={{points, setPoints}}>
  Your app
</Context.Provider>

然后在你的ScreenOne和ScreenTwo你可以获取和设置值：

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

推荐阅读