如何通过将参数放在 object 中将参数传递给路由

Question

我尝试使用传递参数将数据发送到另一个页面，从 page1 到 page2。

这是我在第 1 页的代码：

axios({
            method: 'post',
            url: "http://127.0.0.1:8000/api/masuk",
            data: {
                username: {username}
            }
        })
            .then(function (response){
                if (response.data.data != null) {
                    // Alert.alert(`Username ${username} tidak terdaftar`);
                    console.log(response.data)
                    setdataPetugas(response.data)
                    navigation.navigate('Home', {test: 'name'});
                } else {
                    console.log(response.data)
                    Alert.alert(`Username ${username} tidak terdaftar`);
                    setLoading(false);
                }
            })
            .catch(function (error){
                console.log(error)
            });

这是第 2 页的代码：

const Page = ({route, navigation}) => {
const {test} = route.params;
console.log(test);
return (
    <SafeAreaView style={{ backgroundColor: 'white', }}>
        <ScrollView style={{ paddingHorizontal: '5%' }}>
            <Texts text="Hi, Asep" color="grey" />
            <Gap vertical="5%" />
            <View style={{ flexDirection: 'row' }}>
                <View style={{flex:.8,alignItems:'center'}}>
                    <Image source={require('../../../assets/images/user-profile.png')} resizeMode="cover" style={{ width: 60, height: 60, borderRadius: 10 }} />
                </View>
                <View style={{flex:1}}>
                    <text>{JSON.stringify(test)}</text>
                    <Texts text={''} color="grey"/>
                    <Texts text="+62 856 1234 5678" color="grey"/>
                    <Texts text="Collector" color="grey"/>
               </View>
            </View>
     </ScrollView>
  </SafeAreaView>

当我运行代码时，错误显示如下：[TypeError: undefined is not an object (evaluating 'route.params.test')]

我已经将 react-navigation/native 更新到最新版本，但这并不能解决问题。

谢谢大家帮我..

Answer 1

// send value
navigation.navigate('Home', {test: 'name'});
// getValue
const id = navigation.getParam('test')

Answer 2

您可以使用setOptions API：

从文档中查看以下示例

React.useLayoutEffect(() => {
    navigation.setOptions({
      title: value === '' ? 'No title' : value,
    });
  }, [navigation, value]);