我正在开发一个实践项目,例如登录/注册应用程序,并且我正在使用react-navigations中的堆栈导航,并且它运行完美,
现在,当用户登录时,他应该被重定向到仪表板屏幕,其中我想要标题右侧有一个抽屉“我还添加了屏幕截图”并且我也在堆栈中创建了仪表板屏幕导航 我不知道如何在堆栈导航中添加该抽屉,我只想在仪表板屏幕上添加抽屉,所以有人可以提供帮助吗?谢谢
App.js(我在其中添加了所有堆栈屏幕)
import React from 'react';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import Dashboard from './screens/Dashboard';
const StackNavigation = createStackNavigator({
HomeStack: HomeScreen,
LoginStack: LoginScreen,
RegisterStack: RegisterScreen,
DashboardStack: Dashboard,
}, {
initialRouteName: 'HomeStack',
});
const DrawerNav = createDrawerNavigator({
DashboardStack: Dashboard,
})
export default class App extends React.Component {
render() {
return (
<StackNavigation />
);
}
}
仪表板.js
import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class Dashboard extends React.Component {
static navigationOptions = {
headerTitle: 'Dashboard',
headerLeft: null,
headerTitleStyle: {
flex: 1,
color: '#fff',
textAlign: 'center',
alignSelf: 'center',
fontWeight: 'normal',
},
headerStyle: {
backgroundColor: '#b5259e',
},
}
最佳答案
从右侧显示抽屉。
创建抽屉导航器时添加抽屉位置
参数。
const DrawerNav = createDrawerNavigator({
DashboardStack: Dashboard,
},
{
drawerPosition: 'right'
});
从标题按钮调用 DrawerNavigation。
在 Dashboard.js
中的 toggleDrawer
标题中添加一个按钮。您可以在 navigationOptions
;
class Dashboard extends React.Component {
static navigationOptions = ({navigation, navigationOptions}) => {
return {
headerTitle: 'Dashboard@@',
headerLeft: <Text>Left</Text>,
headerRight: (
<Button onPress = {navigation.toggleDrawer}
title="Menu"
color="#fff">
<Text>Menu</Text>
</Button>
),
headerTitleStyle: {
flex: 1,
color: '#fff',
textAlign: 'center',
alignSelf: 'center',
fontWeight: 'normal',
},
headerStyle: {
backgroundColor: '#b5259e',
},
}
}
您可以将按钮更改为可触摸不透明度或其他按钮。
使用另一个导航器包装 AuthStackNavigation
和 DrawerNavigation
。
使用createSwitchNavigation
或其他方法包装您的导航并导出。
// App.js
import React from 'react';
import {
createStackNavigator,
createDrawerNavigator,
createSwitchNavigator,
} from 'react-navigation';
import HomeScreen from './srcs/screens/Home';
import Dashboard from './srcs/screens/Dashboard';
const AuthStackNavigation = createStackNavigator({
HomeStack: HomeScreen,
LoginStack: HomeScreen,
RegisterStack: HomeScreen,
}, {
initialRouteName: 'HomeStack',
})
const DashboardStack = createStackNavigator({ // For header options
Dashboard: Dashboard
})
const DrawerNav = createDrawerNavigator({
DashboardStack: DashboardStack,
SecondScreen: Dashboard, // You should use another screen.
ThirdScreen: Dashboard,
})
const MainNavigation = createSwitchNavigator({
HomeDrawer: DrawerNav,
AuthStack: AuthStackNavigation, // You will use this.props.navigation.replace('HomeDrawer') after login process.
})
export default MainNavigation // Stack, Drawer, Switch naviagtions return react component.
关于android - 如何在 React Navigation 中添加抽屉内部堆栈导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52469835/