Question

我在不同的 stackoverflow 帖子以及来自 https://reactnavigation.org/docs/connecting-navigation-prop/ 的原始文档中尝试了多种方法但还是没能解决我的问题。

我有一个登录屏幕，在我导航到主屏幕后，从主屏幕我想导航到另一个屏幕，但导航道具未定义。

尝试按照文档操作，但仍然失败。

请帮忙，非常感谢。

我已经导入了我的 App.js、HomePage.js（我想导航到另一个屏幕但没有成功）

目前我拥有的代码基于文档，但在单击按钮时无效。

import * as RootNavigation from '../config/RootNavigation';
const HomePage = () => {

    const onLogOut = () => {
        alert("Logged out")
        firebase.auth().signOut();
    }

    const inventoryOnPress = () => {
        RootNavigation.navigate('InventoryScreen')
    }


    return(
        <View>
                <CardComponent 
                style={styles.cardBackground} 
                title="Inventory"
                onPress={inventoryOnPress}/>
        </View>
    );
}

export default HomePage;

   
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { navigationRef } from './src/config/RootNavigation';

const Stack = createStackNavigator();
function NavStack() {

  const [initialPage,setInitialPage] = useState('LoginScreen');
  return(
    <Stack.Navigator
    initialRouteName={initialPage}
    screenOptions={{
      headerTitleAlign:'center',
      headerStyle: {
        backgroundColor: '#621FF7'
      }
    }}
    >
      <Stack.Screen 
              name="LoginScreen"
              component={LoginPage}
            />
            <Stack.Screen 
              name="HomeScreen"
              component={HomePage} 
              headerLeft={null}
            />
            <Stack.Screen 
              name="SignUpScreen"
              component={SignUpPage}
            />
            <Stack.Screen 
              name="InventoryScreen"
              component={InventoryPage}
            />

    </Stack.Navigator>
  )
}


function App() {
      return (
        <NavigationContainer ref={navigationRef}>
           <NavStack />
        </NavigationContainer>
      );
    }
}

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

// add other navigation functions that you need and export them

Answer 1

navigation 属性可用于包含在 NavigationContainer 中的每个单独的屏幕。
您可以通过以下方式访问它

const inventoryOnPress = () => {
       props.navigation.navigate('InventoryScreen')
    }

请参阅 this 文章以获取更多详细信息。

更新

如果您无法使用 ref to navigation 获得 NavigationContainer 属性，则意味着您的组件尚未呈现并且已对其应用了一些操作。
因此，为避免这种情况，请使用 navigationRef.current.getRootState() 来查看这是否返回有效对象并进行导航。

Answer 2

请不要在 SO 上发布 firebase 或任何其他 API 密钥。

您在此处处理导航（身份验证）的方式存在一些问题。请阅读文档 Auth Flow 以获取详细答案。一个问题是，当用户登录时，您只返回 HomeScreen 而没有返回 NavigationContainer，这是您无法访问 HomePage 中的导航道具的原因之一。

所以基本上在你的 App() fn 中你可以返回这样的东西

<NavigationContainer>
<Stack.Navigator>
isSignedIn ? (
  <>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
  </>
) : (
  <>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUpScreen" component={SignUpPage} />
  </>
)
</Stack.Navigator>
</NavigationContainer>

现在要在主屏幕中获取导航道具，如果您喜欢钩子，可以使用 useNavigation Hook。

import { useNavigation } from '@react-navigation/native';

const HomePage = () => {
const navigation = useNavigation();

  return (
    <Button
      title="Navigate To Profile"
      onPress={() => navigation.navigate("Profile")}
    />
  );
}

如何从任何组件访问导航道具？

2 个答案:

更新