我正在学习通过将 tabNavigator、DrawerNavigator 和 StackNavigator 配置为一个没有 NativeBase 或 Expo 的单一反应导航库来实现原生反应。
我实现了它,但当我在应用程序中执行某些特定序列时出现错误。
应用程序以选项卡屏幕启动。 -> 更改选项卡 -> 打开抽屉 -> 转到堆栈 -> 打开抽屉,然后转到选项卡会出现此错误。
这是我的代码:
App.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;
MergedNavigator.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 个导航器?
在Stack内重置子操作存在问题,可以在此处
看到因此,解决此问题的方法是将
createBottomTabNavigator
包裹在 createStackNavigator
和 headerMode: none
中,以达到所需的效果。
通过添加直接嵌套在 DrawerNavigator 中的 StackNavigator,子操作将仅重置为定义的 StackNavigator 并且不会影响子屏幕状态,因此不会抛出错误,如中所述代码
if (route.index !== undefined && route.index !== 0) {
subAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({
routeName: route.routes[0].routeName,
}),
],
});
}
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}
})
这是已启用标头的修改后的 Snack
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);
当您将键设置为未定义时,导航器使用实际堆栈,而不是根。
首先,您的主要问题是您无法在代码上创建多个 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'
})
希望上面的代码片段对您有用。