javascript - 如何像 redux 一样改变变量的值但使用react-hooks？

Question

也许我的问题不匹配。如何使用另一个组件更改变量的值？我想使用react-hooks来改变值，就像redux一样。例如，我有变量 const [message, setMessage] = useState(''); ，位于 SearchScreen.js 文件中。我想在 Test.js 文件中更改此变量的值。

//SearchScreen file
import 'react-native-gesture-handler'
import React,{ useState } from 'react';
import {View, Text, Button} from 'react-native';
const SearchScreen = ({navigation}) =>{
    const [message, setMessage] = useState('');
    return(
            <View>
                <Text>{message}</Text>
                <Button
                    title='enter to next bar'
                    onPress={() => navigation.navigate('Test')}
                />
            </View>
        );
};

export default SearchScreen;

和另一个文件

//Test file
import React,{useState} from 'react';
import {View, Text} from 'react-native';
const Test = () =>{
    return(
        <View>
            <Text>
            </Text>
        </View>
    );
};

export default Test;

我可以立即在Test.js文件中写入setMessage('Testing')

Answer 1

通过导航发送 setMessage 值消息的 CallBack

import React,{ useState } from 'react';
import {View, Text, Button} from 'react-native';
const SearchScreen = ({navigation}) =>{
    const [message, setMessage] = useState('');
    return(
            <View>
                <Text>{message}</Text>
                <Button
                    title='enter to next bar'
                    onPress={() => navigation.navigate('Test',{setMessage})}
                />
            </View>
        );
};

export default SearchScreen;

之后从导航 Prop 中获取此回调，就像在测试 route 一样

测试文件

import React,{useState} from 'react';
import {View, Text} from 'react-native';
const Test = (props) =>{
const {navigation} = props;
const setMessage = navigation.state.params.setMessage;
    return(
        <View>
            <Text>
            </Text>
        </View>
    );
};

export default Test;

用于文档检查send value to other screen