После того, как пользователь войдет в систему, код вызовет: 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>
);
}
Спасибо! Я изменил это. Однако я считаю, что «const navigation = useNavigation();» вызывает ошибку
Ни 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>
);
}
В вас LoginScreen
вы можете скрыть TabBar
, который теперь виден.
const LoginScreen = ({navigation}) => {
useLayoutEffect(() => {
navigation.setOptions({ tabBarStyle: { display: 'none' } });
}, [navigation])
...
Вы звоните
navigate('MyTabs')
неnavigate('Dashboard')