我正在学习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导航?
3条答案
按热度按时间pcww981p1#
在堆栈内重置子操作时出现问题,可见here
因此,此问题的解决方法是将您的
createBottomTabNavigator
Package 在具有headerMode: none
的createStackNavigator
中,以达到预期效果。信息
通过添加直接嵌套在DrawerNavigator内的StackNavigator,子操作将仅重置为定义的StackNavigator,不会影响子屏幕状态,因此不会引发错误,如代码中所述
合并导航器. js
Here's已启用标头的已修改Snack
2ic8powd2#
如果将键设置为undefined,则导航器将使用实际堆栈,而不是根堆栈。
nukf8bse3#
首先,主要问题是不能在代码中创建多个StackNavigator().
请尝试不同的导航器重定向,如下面的示例代码.
希望上面代码片段对您有用。