如何将导航句柄中的参数传递到与您导航到的屏幕不同的屏幕？

Question

我的应用程序中有一个登录屏幕，当使用用户名/密码点击登录按钮时，我尝试将 result.user 参数传递到名为“用户配置文件”的屏幕，同时导航到“BottomTabs”，以便我可以在“用户配置文件”屏幕中显示当前登录用户的用户名和密码。但是，下面的代码生成未定义的参数，我似乎无法让它正确通过。

登录.js

import { verifyUser, addUser } from '../DBA/DBAdapter';

const handleLogin = () => {
    if (username.length === 0 || password.length === 0) {
      setLoginError('Please fill in both username and password.');
      showToast('Please fill in both username and password.');
    } else if (username.length <= 7) {
      setLoginError('Username should be at least 8 characters long.');
      showToast('Username should be at least 8 characters long.');
    } else if (password.length <= 7) {
      setLoginError('Password should be at least 8 characters long.');
      showToast('Password should be at least 8 characters long.');
    } else {
      verifyUser(username, password, (result) => {
        if (result.success) {
          loginUser(result.user.username);
          **navigation.navigate('BottomTabs', {
            screen: 'User Profile',
            params: { user: result.user },
          });**
        } else {
          setLoginError('Invalid credentials. Please check your username and password.');
          showToast('Invalid credentials. Please check your username and password.');
        }
      });
    }
  };

用户资料.js

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, TouchableOpacity, Image, StyleSheet, ScrollView } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import DateTimePickerModal from "react-native-modal-datetime-picker";

const Profile = ({ route }) => {
  console.log(route);
  const [username, password] = useState('');
  const [setUsername, setPassword] = useState('');
}

//rest of code below

App.js：

import React, { createContext, useState, useEffect } from 'react';
import { StyleSheet, } from 'react-native';
import BarCodeScan from './screens/BScanner';
import Favorites from './screens/Favorites';
import ProductInfo from './screens/ProductInfo';
import BottomTabs from './components/BottomTabs';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import TermsAndService from './screens/terms_and_service';
import { ListProvider } from './screens/ListContext';
import AboutUs from './screens/About Us';
import ProductDetailScreen from './screens/ProductDetail';
import WikiScreen from './screens/WikiScreen';
import Nutrition from './screens/Nutrition';
import Login from './components/Login';
import { initializeDB } from './DBA/DBAdapter';
import ChangePassword from './components/ChangePassword';
import Settings from './screens/Settings';
import UserProfile from './screens/User Profile';

const Stack = createStackNavigator();

export const GlobalContext = createContext();

export default function App() {
  const [user, setUser] = useState(null);

  const loginUser = (username) => {
    const user = { id: 1, name: username };
    setUser(user);
  };

  const logoutUser = () => {
    setUser(null);
  };

  useEffect(() => {
    initializeDB();
  }, []);

  return (
    <GlobalContext.Provider value={{ loginUser, logoutUser }}>
      <ListProvider>
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Login">
            <Stack.Screen name="BottomTabs" options={{ headerShown: false, title: 'Back'}} component={({ navigation }) => ( <BottomTabs screenProps={{ navigation }} /> )} />
            <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
            <Stack.Screen name="ProductInfo" component={ProductInfo} options={{ title: 'Product Details' }} />
            <Stack.Screen name="WikiScreen" component={WikiScreen} options={{ title: 'Wikipedia' }} />
            <Stack.Screen name="ProductDetails" component={ProductDetailScreen} options={{ title: 'Product Details' }} />
            <Stack.Screen name="Nutrition" component={Nutrition} options={{ title: 'Nutritional Facts' }} />
            <Stack.Screen name="ChangePassword" component={ChangePassword} options={{ headerShown: false }} />
            <Stack.Screen name="BarCodeScan" component={BarCodeScan} />
            <Stack.Screen name="TermsAndService" component={TermsAndService} />
            <Stack.Screen name="About Us" component={AboutUs} />
            <Stack.Screen name="Favorites" component={Favorites} />
            <Stack.Screen name="Settings" component={Settings} options={{ title: 'Settings' }} />
            <Stack.Screen name="User Profile" component={UserProfile} options={{ title: 'User Profile' }} />
          </Stack.Navigator>
        </NavigationContainer>
      </ListProvider>
    </GlobalContext.Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

DBAdapter.js：

export const verifyUser = (username, password, callback) => {
    db.transaction((tx) => {
        try {
            tx.executeSql(
                "Select * from Users WHERE username = ?",[username],
                (_,{ rows }) => {
                    if (rows.length === 0) 
                    {
                        callback({ success: false, error: 'Invalid Username' }); 
                    } else {
                        const user = rows.item(0);
                        if(user.password === password) {
                            callback({ success: true, user });
                        } else {
                            callback({ success: false, error: 'Invalid Password' });
                        }
                    }
                },
                (_, e) => {
                    console.log(e)
                })
        } catch {
            console.log("Error verifying the user")
        }
    })
}

Console.log 输出：

Object { "key": "User Profile-xZVM9w3YNMNTv3j0gnFVF", "name": "User Profile", "params": undefined, "path": undefined, }

我尝试了多种不同的方式将参数嵌套到路由中。我尝试使用 props.route.params。我尝试使用全局导航方法。我期望 Login.js 中的用户名/密码值传递给 User Profile.js，同时在用户点击登录按钮时导航到 BottomTabs。

Answer 1

试试这个： 1.首先将

User Profile

重命名为

UserProfile

2.

navigation.navigate('UserProfile', { user: result.user })

另一个：

User Profile

不在“BottomTabs”堆栈内，如果您想使用此代码：

**navigation.navigate('BottomTabs', {
            screen: 'User Profile',
            params: { user: result.user },
          });**

您必须在

User Profile

堆栈中定义

BottomTabs