Блог

У меня есть моя ScreenOne.js файл, в котором у меня есть переменная под названием points с начальным значением 0. У меня также есть некоторые функции в файле, которые добавляют значение 10 к точкам.

Обновленная переменная points отображается на экране, и она хорошо обновляется. Я также хочу отобразить обновленную переменную точек на экране под названием ScreenTwo.js но это, похоже, проблема.

Я уже пытался сохранить обновленное значение в локальном хранилище, но оно возвращает значение 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;
 

Вам следует ознакомиться с документами для контекста в react.

Вам нужно создать контекст, который будет обертывать ваш App .

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

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

Затем в вашем ScreenOne и ScreenTwo вы можете получить и установить значение с помощью:

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