找不到导航对象。您的组件是否在 NavigationContainer 中

Question

用户登录后，代码将调用：navigation.navigate('Dashboard'); 导航到仪表板并显示底部选项卡菜单。但是，这是行不通的。如何再次从登录页面导航到我的选项卡菜单？

如果我删除 const navigation = useNavigation(); 它仍然无法正常工作

这是app.js:

export default function App() {

  const navigation = useNavigation();

  useEffect(() => {
    auth.onAuthStateChanged(user => {
      navigation.navigate('MyTabs');
      // alert("Should go dash");
    })
  }, [])
  
  if (1 == 1){
    return (
      <LoginScreen />
    );
  }
  return (
    <MyTabs />
  );
}

这是我的底部标签菜单：

const Tab = createBottomTabNavigator();

const dashboardName = "Dashboard";
const activitesName = "Activities";
const friendsName = "Friends";

function MyTabs() {
  return (
    <NavigationContainer>
        <Tab.Navigator
        initialRouteName={dashboardName}
        screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
                let iconName;
                let rn = route.name;

                if(rn === dashboardName) {
                    iconName = 'stats-chart';
                } else if (rn === friendsName) {
                    iconName = 'person';
                } else {
                    iconName = 'calendar';
                }

                return <Ionicons name={iconName} size={size} color={color} />


            },
            tabBarStyle:{
                height:60,
                backgroundColor: '#000000'
            },
            tabBarItemStyle:{
                activeTintColor: '#5DB075'
            }
        })}
        tabBarOptions={{
            activeTintColor: '#5DB075',
            inactiveTintColor: '#ffffff',
            labelStyle: { paddingBottom: 10, fontSize: 10, outerHeight: 100},
        }}
        >
            
        <Tab.Screen name={activitesName} component={Activities} />
        <Tab.Screen name={dashboardName} component={Dashboard} />
        <Tab.Screen name={friendsName} component={Friends} />
        </Tab.Navigator>
    </NavigationContainer>

  );
}

Answer 1

App 和 Login 均未位于导航容器内的导航器中。这是行不通的。您需要一个有条件地呈现 LoginScreen 或所有其他屏幕的身份验证工作流。不需要导航（在这种情况下它不起作用）。

这里是 recommended way 根据 react-native-navigation 解决这个问题。

const Tab = createBottomTabNavigator();

const dashboardName = "Dashboard";
const activitesName = "Activities";
const friendsName = "Friends";

export default const App = () => {

    const [isSignedIn, setSignedIn] = useState()

    React.useEffect(() => {
      const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
           setSignedIn(user ? true : false)
      });
      return unsubscribe;
    }, [])

    return (
        <NavigationContainer>
           <Tab.Navigator
            initialRouteName={dashboardName}
            screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
                let iconName;
                let rn = route.name;

                if(rn === dashboardName) {
                    iconName = 'stats-chart';
                } else if (rn === friendsName) {
                    iconName = 'person';
                } else {
                    iconName = 'calendar';
                }

                return <Ionicons name={iconName} size={size} color={color} 
             />
             },
              tabBarStyle:{
                height:60,
                backgroundColor: '#000000'
             },
              tabBarItemStyle:{
                activeTintColor: '#5DB075'
              }
           })}
           tabBarOptions={{
            activeTintColor: '#5DB075',
            inactiveTintColor: '#ffffff',
            labelStyle: { paddingBottom: 10, fontSize: 10, outerHeight: 100},
        }}
        >

        {
             isSignedIn ? (
                 <>
                   <Tab.Screen name={activitesName} component={Activities} />
                   <Tab.Screen name={dashboardName} component={Dashboard} />
                   <Tab.Screen name={friendsName} component={Friends} />
                 </>
             ) : (
               <>
                <Tab.Screen name={"Login"} component={LoginScreen} />
               </>
             )
        } 
        </Tab.Navigator>
    </NavigationContainer>
  );
}

在您 LoginScreen 中，您可能想要隐藏现在可见的 TabBar。


const LoginScreen = ({navigation}) => {
    useLayoutEffect(() => {
      navigation.setOptions({ tabBarStyle: { display: 'none' } });
    }, [navigation])

...

找不到导航对象。您的组件是否在 NavigationContainer 中

Couldn't find a navigation object. Is your component inside NavigationContainer

javascript

mobile

android

reactjs

react-native