我是本机反应的初学者。我想根据登录的用户将数据从 login.js 传递到 home.js 。但是当我尝试使用下面的代码时,出现错误“进入 home.js 时无法读取未定义的属性“任务”。我已经检查了login.js中的console.log,它显示出来了,我不知道如何将它传递给home.js。
App.js
import React from 'react';
import 'react-native-gesture-handler';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import Home from './src/screens/Home';
import Login from './src/screens/Login';
import Register from './src/screens/Register';
import Splash from './src/screens/Splash';
import Account from './src/Account';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Icon2 from 'react-native-vector-icons/MaterialCommunityIcons';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const RootHome = () => {
return (
<Tab.Navigator
initialRouteName="HomeTab"
screenOptions={{
tabBarActiveTintColor: '#42c983',
headerShown: false,
tabBarStyle: {
backgroundColor: '#265c6f',
height: 60,
},
tabBarLabelStyle: {
fontFamily: 'UbuntuSans-Regular',
fontSize: 14,
marginBottom: 5,
},
tabBarHideOnKeyboard: true,
}}>
<Tab.Screen
name="HomeTab"
component={Home}
options={{
tabBarLabel: 'Task',
tabBarInactiveTintColor: 'white',
tabBarIcon: ({color}) => (
<Icon name="tasks" color={color} size={20} />
),
}}></Tab.Screen>
<Tab.Screen
name="AccountTab"
component={Account}
options={{
tabBarLabel: 'Account',
tabBarInactiveTintColor: 'white',
tabBarIcon: ({color}) => (
<Icon2 name="account" color={color} size={24} />
),
}}></Tab.Screen>
</Tab.Navigator>
);
};
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Splash" component={Splash} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Home" component={RootHome} />
<Stack.Screen name="Account" component={Account} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
Login.js
const Login = () => {
const navigation = useNavigation();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleLogin = () => {
axios
.post('http://192.168.1.10:3000/users/login', {
email,
password,
})
.then(res => {
console.log(res.data.metadata);
console.log(res.data.tasks);
navigation.navigate('Home', {tasks: res.data.tasks});
})
.catch(err => {
console.log(err);
});
};
Home.js
const Home = ({route}) => {
const tasks = route.params.tasks;
console.log(tasks);
我期望 res.data.tasks 能够从 login.js 传递到 home.js。但它无法读取属性“任务”并显示“未定义”
这是当您像这样传递数据时的唯一方法,那么只有您才能在主屏幕中获取参数数据。
让我详细解释一下所有事情..
让我们深入研究一下为什么需要使用指定格式传递数据的细节:
**
** 当您使用嵌套导航器(例如 Tab.Navigator 中的 Stack.Navigator)时,每个导航器管理自己的一组屏幕。在本例中,RootHome 是 Tab.Navigator 中的一个组件,因此导航结构是分层的,选项卡导航器包含屏幕。**
** 要访问嵌套导航器中的屏幕,您需要指定父导航器(在本例中为选项卡导航器)和子屏幕(例如“HomeTab”)。这可确保导航系统知道要导航到嵌套导航器中的哪个特定屏幕。**
** 将参数传递到嵌套导航器中的屏幕时,您需要在导航选项对象的 params 属性中提供参数。此语法明确告诉导航系统这些参数适用于 Stack.Navigator 的“Home”屏幕内的嵌套屏幕(“HomeTab”)。**
** 通过在导航调用中指定屏幕名称(“HomeTab”)和参数,您可以使代码更加明确和不言自明。这种清晰度有助于其他开发人员(以及未来的您)了解导航流程和参数的预期目的地。
一致使用推荐的格式来传递参数可确保整个导航代码库的一致性。这种一致性简化了维护和调试,因为它减少了与导航和数据传递相关的错误或混乱的可能性。
在具有多个嵌套导航器和屏幕的更复杂的导航场景中,遵循指定的格式对于有效管理导航流至关重要。明确指定屏幕名称和参数有助于保持对导航路径的清晰理解。
遵循导航最佳实践(包括正确的参数传递)可确保您的代码库保持可扩展性并适应未来的变化。随着应用程序的发展和新功能的添加,遵循既定模式可以简化新屏幕和导航流程的集成。
总之,使用指定格式 (navigation.navigate('Home', { screen: 'HomeTab', params: {tasks: '100' } })) 传递数据对于导航到分层导航结构中的嵌套屏幕至关重要,确保代码库的清晰度、一致性和可维护性。
这样,导航道具就来自父应用程序屏幕。如果这个方法对你有用,请给我点个赞。如果没有,您能否提供 console.log(JSON.stringify(route)) 的输出以获得进一步帮助?