在 react-native 中将数据从一个屏幕传递到另一个屏幕时获取未定义的值

Question

当我尝试将数据从登录屏幕传递到 MyProfile 屏幕时，我得到了未定义的值。

我很困惑为什么我得到未定义的值？

这是我的主要导航文件的代码。

route.js

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createDrawerNavigator } from "@react-navigation/drawer";
import LoginScreen from "./../screens/Login/index.js";
import MyProfileScreen from "../screens/MyProfile/index.js";
import AboutUsScreen from "../screens/AboutUs/index.js";
import SettingScreen from "../screens/Setting/index.js";

import { Image, StyleSheet, View, TouchableOpacity } from "react-native";
import { heightPercentageToDP as hp, widthPercentageToDP as wp } from 'react-native-responsive-screen';
import { RFValue } from "react-native-responsive-fontsize"

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

const NavigationDrawerStructure = (props) => {
    const toggleDrawer = () => {
        props.navigationProps.toggleDrawer();
    }
    return (
        <View style={{ flexDirection: 'row' }}>
            <TouchableOpacity onPress={() => toggleDrawer()}>

                <Image
                    source={{ uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png' }}
                    style={{
                        width: 25,
                        height: 25,
                        marginLeft: 5
                    }}
                />
            </TouchableOpacity>
        </View>
    )
}

const geHeaderTitle = (route) => {
    const routeName = getFocusedRouteNameFromRoute(route) ?? 'MyProfileScreen';
    switch (routeName) {
        case 'MyProfileScreen':
            return 'Profile';
        case 'AboutUsScreen':
            return 'AboutUs';
        case 'SettingScreen':
            return 'Setting';

    }
}

const BottomTab = () => {
    return (

        <Tab.Navigator initialRouteName="MyProfileScreen"
            tabBarOptions={{
                activeTintColor: "red",
                labelStyle: {
                    fontSize: RFValue('14'),
                    marginTop: 5
                },
                style: { height: hp('11') }

            }}
        >

            <Tab.Screen
                name="MayProfileScreen"
                component={MyProfileScreen}
                options={{
                    tabBarLabel: 'Profile',
                    tabBarIcon: ({ focused }) => (
                        focused ?
                            <Image source={require('./../../asstes/images/profile.png')} style={styles.activeImg} /> :
                            <Image source={require('./../../asstes/images/profile.png')} style={styles.deActiveImg} />
                    )

                }}
            />

            <Tab.Screen
                name="AboutUsScreen"
                component={AboutUsScreen}
                options={{
                    tabBarLabel: 'AboutUs',
                    tabBarIcon: ({ focused }) => (
                        focused ?
                            <Image source={require('./../../asstes/images/aboutus.png')} style={styles.activeImg} /> :
                            <Image source={require('./../../asstes/images/aboutus.png')} style={styles.deActiveImg} />
                    )

                }}
            />
            <Tab.Screen
                name="SettingScreen"
                component={SettingScreen}
                options={{
                    tabBarLabel: 'Setting',
                    tabBarIcon: ({ focused }) => (
                        focused ?
                            <Image source={require('./../../asstes/images/setting.png')} style={styles.activeImg} /> :
                            <Image source={require('./../../asstes/images/setting.png')} style={styles.deActiveImg} />
                    )

                }}

            />
        </Tab.Navigator>

    )
}

const HomeStack = ({ navigation }) => {
    return (
        <Stack.Navigator initialRouteName="LoginScreen">
            <Stack.Screen name="LoginScreen" component={LoginScreen} options={{ headerShown: false }} />
            <Stack.Screen name="MyProfileScreen" component={BottomTab}

                options={({ route }) => ({
                    headerTitle: geHeaderTitle(route),
                    headerLeft: () => (
                        <NavigationDrawerStructure navigationProps={navigation} />
                    ),
                    title: 'Profile',
                    headerStyle: { backgroundColor: '#f4511e' },
                    headerTintColor: '#fff',
                    headerTitleStyle: { fontWeight: 'bold' }
                })}
            />
            <Stack.Screen name="AboutUsScreen" component={AboutUsScreen}
                options={{
                    title: 'AboutUS',
                    headerStyle: { backgroundColor: '#f4511e' },
                    headerTintColor: '#fff',
                    headerTitleStyle: { fontWeight: 'bold' }
                }} />
            <Stack.Screen name="SettingScreen" component={SettingScreen}
                options={{
                    title: 'Setting',
                    headerStyle: { backgroundColor: '#f4511e' },
                    headerTintColor: '#fff',
                    headerTitleStyle: { fontWeight: 'bold' }
                }}
            />
             
        </Stack.Navigator>
    )
}

const AboutUsStack = ({ navigation }) => {
    return (
        <Stack.Navigator initialRouteName="AboutUsScreen"
            screenOptions={{
                headerLeft: () => (
                    <NavigationDrawerStructure navigationProps={navigation} />
                ),
                headerStyle: { backgroundColor: '#f4511e' },
                headerTintColor: '#fff',
                headerTitleStyle: { fontWeight: 'bold' }
            }}
        >

            <Stack.Screen name="AboutUsScreen" component={AboutUsScreen} options={{ title: 'AboutUs' }} />

        </Stack.Navigator>
    )
}

const SettingStack = ({ navigation }) => {
    return (
        <Stack.Navigator initialRouteName="SettingScreen"
            screenOptions={{
                headerLeft: () => (
                    <NavigationDrawerStructure navigationProps={navigation} />
                ),
                headerStyle: { backgroundColor: '#f4511e' },
                headerTintColor: '#fff',
                headerTitleStyle: { fontWeight: 'bold' }
            }}
        >

            
<Stack.Screen name="SettingScreen" component={SettingScreen} options={{ title: 'Setting', }} />

        </Stack.Navigator>
    )
}



const Navigation = () => {
    return (
        <NavigationContainer>

            <Drawer.Navigator

                drawerContentOptions={{
                    activeTintColor: '#e91e63',
                    itemStyle: { marginVertical: 5 }
                }}
            >
                <Drawer.Screen name="HomeStack" options={{ drawerLabel: 'Profile' }} component={HomeStack} />
                <Drawer.Screen name="AboutUsStack" component={AboutUsStack} options={{ drawerLabel: 'AboutUs' }} />
                <Drawer.Screen name="SettingStack" component={SettingStack} options={{ drawerLabel: 'Setting' }} />

            </Drawer.Navigator>

        </NavigationContainer>
    )
}


const styles = StyleSheet.create({
    activeImg: {
        height: hp('4.8'), width: wp('8.5'), marginTop: 10, borderRadius: 12, tintColor: 'red'
    },
    deActiveImg: {
        height: hp('4.8'), width: wp('8.5'), marginTop: 10, borderRadius: 12, tintColor: 'gray'
    }
})

export default Navigation;

当用户点击登录按钮时，我正在调用下面的函数。

这是我尝试将数据从登录屏幕传递到 MyProfile 屏幕的一些代码行

登录界面

  const resetTextInput = () => {
        setName(null);
        setPassword(null);
       
         navigation.navigate('MyProfileScreen', { userName: name, userPwd: password,});

    }

     <TouchableOpacity style={styles.loginBtn} onPress={() => { resetTextInput() }}>     
             <Text style={styles.loginBtnTxt}>Login</Text>
      </TouchableOpacity>

这里有几行代码说明我如何尝试将数据从登录屏幕获取到 MyProfile 屏幕。

我的个人资料屏幕

useEffect(() => {
       
         console.log("username is-->",JSON.stringify(route?.params?.userName));
         console.log("userpassword is-->",JSON.stringify(route?.params?.userPwd));
    });

Answer 1

也许将route.params? 作为参数传递到你的useEffect 中？

useEffect(() => {
    ...
},[route.params?]);

这样当你导航到它时它就会应用效果。

Answer 2

你有一个多堆栈导航器吗？如果您在不同的堆栈导航器中，并且希望将参数从不同的堆栈导航器传递到屏幕，则必须指定屏幕。

例如，您在 AuthStack 中并且想要从 ProfileStack 导航到 MyProfileScreen：

navigation.navigate('ProfileStack', { screen: 'MyProfileScreen', params: { //data here } });

如果不是，我认为您的 BottomTab 组件中有错字。将第一个选项卡的名称从“MayProfileScreen”更改为“MyProfileScreen”。

然后使用它来导航：

navigation.navigate('MyProfileScreen', { //params here });