React Native 如何从底部标签导航器中的组件导航到屏幕导航器

djp7away 于 2023-03-19 发布在 React

关注(0)|答案(1)|浏览(179)

在解释我的问题之前，让我展示一下React原生项目的文件结构：

--- App.js (main file where most the project routing is stored. Main, login and signup stack.screen )
------|
      |-- <Stack.Screen> Main component (main component stores the bottom navigation tabs)
      |         |
      |         |-- <Tab.Screen> Home bottom tab
      |         |-- <Tab.Screen> Activity bottom tab
      |         |-- <Tab.Screen> Settings bottom tab ( this is where the problem arises )
      |
      |
      |-- <Stack.Screen> Login component
      |-- <Stack.Screen> Signup component

设置底部选项卡显示设置组件。设置组件具有注销功能。注销功能清除asyncstorage，一旦清除asyncstorage，我希望组件从Apps.js文件重定向到登录组件。
下面是我的Settings组件中的代码
PS.这是一个类组件

logOutPress = async() =>
{
     try {
          await AsyncStorage.clear();
          this.props.navigation.navigate('Login');
     } catch (error) {
          console.log('Error clearing AsyncStorage:', error);
     }
}

render ()
{
    return (
        <View style={styles.container}>
            <Button title="Sign out" onPress={() => {this.logOutPress()}} />
        </View>
    );
}

但是，在按下按钮并清除asyncstorage后，当项目必须重定向时，会出现下面的错误：
任何导航器均未处理负载为{“name”：“Login”}的操作“NAVIGATE”。
接着是：
您是否有一个名为“登录”的屏幕？
比这个建议：

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

react-native

来源：https://stackoverflow.com/questions/75749866/how-to-navigate-from-component-in-react-bottom-tab-navigator-to-screen-navigator

1条答案

按热度按时间

gjmwrych1#

您的堆栈未正确组织
想想你要在打开应用程序时首先呈现的屏幕，你必须首先加载底部选项卡
你需要先呈现BottomTab组件

const Route = () => {
  const Stack = createNativeStackNavigator();
  const Tab = createBottomTabNavigator();

  const BottomTab = () => {
    <Tab.Navigator>
      <Tab.Screen name="HomeScreen" component={HomeScreen} />
      <Tab.Screen name="ActivityScreen" component={ActivityScreen} />
      <Tab.Screen name="SettingScreen" component={SettingScreen} />
    </Tab.Navigator>;
  };
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="BottomTab"
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="HomeScreen" component={HomeScreen} />
        <Stack.Screen name="SettingScreen" component={SettingScreen} />
        <Stack.Screen name="ActivityScreen" component={ActivityScreen} />
        <Stack.Screen name="PracticeScreen" component={PracticeScreen} />
        <Stack.Screen name="LoginScreen" component={LoginScreen} />
        <Stack.Screen name="BottomTab" component={BottomTab} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

尝试实现这个！它工作

赞(0）回复(0）举报 2023-03-19

我来回答

React Native 如何从底部标签导航器中的组件导航到屏幕导航器

1条答案

相关问题

热门标签

最新问答