Reactjs React Native-没有为登录定义路由
我正在学习如何将tabNavigator、DroperNavigator和StackNavigator配置为一个不带NativeBase或Expo的单反应导航库的react native 我实现了它,但是当我在应用程序中执行某些特定的序列时,出现了一个错误 应用程序从选项卡屏幕开始。->更改选项卡->打开抽屉->转到堆栈->打开抽屉,然后转到选项卡会出现此错误 这是我的密码: App.jsReactjs React Native-没有为登录定义路由,reactjs,react-native,react-navigation,Reactjs,React Native,React Navigation,我正在学习如何将tabNavigator、DroperNavigator和StackNavigator配置为一个不带NativeBase或Expo的单反应导航库的react native 我实现了它,但是当我在应用程序中执行某些特定的序列时,出现了一个错误 应用程序从选项卡屏幕开始。->更改选项卡->打开抽屉->转到堆栈->打开抽屉,然后转到选项卡会出现此错误 这是我的密码: App.js import React from 'react'; import {Drawer} from "./sr
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;
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导航?可以看到堆栈中的子操作被重置时出现问题 因此,解决此问题的方法是将
createBottomTabNavigator
包装在createStackNavigator
中,使用headerMode:none
,以达到所需效果
信息
通过添加直接嵌套在抽屉导航器中的堆栈导航器,子操作将仅重置为定义的堆栈导航器,并且不会影响子屏幕状态,因此不会引发错误,如中所述
MergedNavigator.js
启用了标题的修改零食首先,您的主要问题是不能在代码上创建多个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'
})
希望上面的代码片段对您有用
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);
当您将密钥设置为“未定义”时,导航器使用的是实际堆栈,而不是根堆栈。您的抽屉是否应该有登录密钥?@Colin抱歉,但我不明白您想问什么。然后,我如何从选项卡导航到其他页面并仍然显示标题。。?我尝试了很多东西,但还是无法显示。您有什么解决方案或完美的演示吗?
headerMode:none
应该只禁用该特定堆栈的头,其他堆栈将不受影响。您可以将问题及其相关详细信息添加到问题中,我将在有空时查看。当我使用this.props.navigation从选项卡导航到其他页面时,单击返回按钮单击标题时,它将重定向到其他页面而不是选项卡。如果您有整个react本机应用程序的任何工作演示,请与我共享它好吗?>首先,您的主要问题是不能在代码上创建多个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'
})
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);