Question

如何通过将参数放入对象中来将参数传递给路由

2022-02-17

524

javascript reactjs react-native parameter-passing

我尝试通过传递参数将数据发送到另一个页面，从页面 1 到页面 2。

这是我从页面 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 不是对象（评估“route.params.test”）]

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

感谢大家帮助我..

Answer 1

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

Raphael

2022-02-17

Answer 2

您可以使用 setOptions API：

查看文档中的以下示例

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