我是本机反应的初学者。我想根据登录的用户将数据从 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。但它无法读取属性“任务”并显示“未定义”