找不到導航物件。您的組件在NavigationContainer內嗎

用戶登錄后，代碼將呼叫：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");
    })
  }, [])
  
  return (
    <LoginScreen />
  );
}

這是我的底部標簽選單：

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>

  );
}

uj5u.com熱心網友回復：

既不App也不Login位于導航容器內的導航器中。這是行不通的。您需要一個有條件地呈現 LoginScreen 或所有其他螢屏的身份驗證作業流。不需要導航（在這種情況下它不起作用）。

這是根據 解決此問題的推薦方法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>
  );
}

在 youLoginScreen中，您可能想要隱藏TabBar現在可見的內容。

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

...

標籤：javascript 安卓 反应 反应式 移动的

上一篇：React.jsx：型別無效，預期為字串或類/函式，但得到：未定義

下一篇：如何根據python中其他列的單元格條件移動列的位置