reactjs React Native -没有为登录定义路由

sf6xfgos 于 2023-01-30 发布在 React

关注(0)|答案(3)|浏览(90)

我正在学习react native，方法是将tabNavigator、DrawerNavigator和StackNavigator配置成一个没有NativeBase或Expo的库，只有一个react导航库。
我实现了它，但是当我在应用程序中执行一些特定的序列时，出现了一个错误。
应用程序以选项卡屏幕启动。-〉更改选项卡-〉打开抽屉-〉后藤堆栈-〉打开抽屉，然后转到选项卡会出现此错误。
下面是我的代码：

应用程序js

import React from 'react';
import {Drawer} from "./src/navigation/MergedNavigator";
import {View,Text} from "react-native";

const App = () => (
    <View style={{flex: 1,backgroundColor: '#293656'}}>
        <Drawer />
    </View>
);

export default App;

合并导航器.js

import {DrawerNavigator,StackNavigator,createBottomTabNavigator} from 'react-navigation';

// stack navigation screens
import DetailScreen from '../screens/detail';
import MainScreen from '../screens/main';
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';

// tab navigator screens
import LoginScreen from '../screens/Login';
import TabOne from '../screens/tabA';
import TabTwo from '../screens/tabB';

//plain

export const stack = StackNavigator({
    DetailScreen:{screen:DetailScreen},
    MainScreen:{screen:MainScreen}
},{
    initialRouteName:'DetailScreen'
});

const secondStack = StackNavigator({
    RegisterScreen:{screen:RegisterScreen},
    ForgotScreen:{screen:ForgotScreen}
},{
    initialRouteName:'ForgotScreen'
})

export const Tabs = createBottomTabNavigator({
    Login:{screen:LoginScreen},
    TabOne:{screen:secondStack},
    TabTwo:{screen:TabTwo}
},{
    animationEnabled:true
})

export const Drawer = DrawerNavigator({
    Tabs:{screen:Tabs},
    Stack:{screen:stack}
})

所有其他导入的堆栈屏幕除了标题什么都没有。我的代码有什么问题吗？或者有什么更好的方法可以实现这些所有3个导航器只有React导航？

reactjs

来源：https://stackoverflow.com/questions/52062728/react-native-there-is-no-route-defined-for-login

3条答案

按热度按时间

pcww981p1#

在堆栈内重置子操作时出现问题，可见here
因此，此问题的解决方法是将您的createBottomTabNavigator Package 在具有headerMode: none的createStackNavigator中，以达到预期效果。

信息

通过添加直接嵌套在DrawerNavigator内的StackNavigator，子操作将仅重置为定义的StackNavigator，不会影响子屏幕状态，因此不会引发错误，如代码中所述

if (route.index !== undefined && route.index !== 0) {
   subAction = NavigationActions.reset({
   index: 0,
   actions: [
      NavigationActions.navigate({
      routeName: route.routes[0].routeName,
   }),
  ],
 });
}

合并导航器. js

import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';

// tab navigator screens
import LoginScreen from '../screens/Login';
import TabOne from '../screens/tabA';
import TabTwo from '../screens/tabB';

//plain

export const stack = StackNavigator({
    DetailScreen:{screen:DetailScreen},
    MainScreen:{screen:MainScreen}
},{
    initialRouteName:'DetailScreen'
});

const secondStack = StackNavigator({
    RegisterScreen:{screen:RegisterScreen},
    ForgotScreen:{screen:ForgotScreen}
},{
    initialRouteName:'ForgotScreen'
})

export const Tabs = createBottomTabNavigator({
    Login:{screen:LoginScreen},
    TabOne:{screen:secondStack},
    TabTwo:{screen:TabTwo}
},{
    animationEnabled:true
})

const TabStack = createStackNavigator({ //... Adding the Stack here
  Tabs: {screen: Tabs}
}, {
  headerMode: 'none'
})

export const Drawer = DrawerNavigator({
    Tabs:{screen:Tab},
    Stack:{screen:stack}
})

Here's已启用标头的已修改Snack

赞(0）回复(0）举报 2023-01-30

2ic8powd2#

import { StackActions, NavigationActions } from 'react-navigation';

let { navigation } = this.props;
let resetAction = StackActions.reset({
    key: undefined,
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'YourScreen' })],
});
navigation.dispatch(resetAction);

如果将键设置为undefined，则导航器将使用实际堆栈，而不是根堆栈。

赞(0）回复(0）举报 2023-01-30

nukf8bse3#

首先，主要问题是不能在代码中创建多个StackNavigator（）.
请尝试不同的导航器重定向，如下面的示例代码.

import {DrawerNavigator,StackNavigator,createBottomTabNavigator,createMaterialTopTabNavigator} from 'react-navigation';

// stack navigation screens
import DetailScreen from '../screens/detail';
import MainScreen from '../screens/main';
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';

// tab navigator screens
import * as TAB from '../tab';

export const stack = StackNavigator({
    DetailScreen:{screen:DetailScreen},
    MainScreen:{screen:MainScreen}
},{
    initialRouteName:'DetailScreen'
});

const secondStack = createMaterialTopTabNavigator({
    RegisterScreen:{screen:RegisterScreen},
    ForgotScreen:{screen:ForgotScreen}
},{
    initialRouteName:'ForgotScreen'
})

export const Tabs = createBottomTabNavigator({
    Login:{screen:TAB.Login},
    TabOne:{screen:secondStack},
    TabTwo:{screen:TAB.TabB}
},{
    animationEnabled:true,
    initialRouteName:'Login'
})

export const Drawer = DrawerNavigator({
    Tabs:{screen:Tabs},
    Stack:{screen:stack}
},
{
    animationEnabled:true,
    initialRouteName:'Tabs'
})

希望上面代码片段对您有用。

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs React Native -没有为登录定义路由

3条答案

信息

合并导航器. js

相关问题

热门标签

最新问答