我正在尝试使用抽屉导航器在我的应用程序中的一些记录页面之间导航。当我向右滑动时，它会打开，但在我选择项目时它不会更改视图。
我正在安卓设备上运行该应用程序。
应用.js
import React, { Component } from 'react';
import RootNavigator from './navigation/AppNavigator';
class App extends Component {
render() {
return <RootNavigator />
}
}
export default App;
应用导航器.js
import { createSwitchNavigator, createAppContainer, createDrawerNavigator } from "react-navigation";
import SplashScreen from '../features/SplashScreen/SplashScreen';
import HomePage from '../features/HomePage/HomePage';
import LoginPage from '../features/LoginPage/LoginPage';
import ProfilePage from '../features/ProfilePage/ProfilePage';
import SchedulePage from '../features/SchedulePage/SchedulePage';
export const LoggedIn = createDrawerNavigator(
{
HomePage: {
screen: HomePage,
},
ProfilePage: {
screen: ProfilePage
},
SchedulePage: {
screen: SchedulePage
},
},
{
initialRouteName: 'HomePage'
}
);
const rootNavigator = createSwitchNavigator(
{
SplashScreen: SplashScreen,
LoggedIn: LoggedIn,
LoginPage: {
screen: LoginPage,
navigationOptions: {
header: null
}
}
},
{
headerMode: 'none',
initialRouteName: "SplashScreen"
}
);
export default createAppContainer(rootNavigator);
导航到主页登录完成后，它会使用以下方法重定向到主页：
this.props.navigation.navigate('HomePage');
登录后，我被重定向到主页，这就是我向右滑动时看到的，但单击它们不会改变任何内容。
抽屉导航器
这是我的第一个 react 原生项目，所以我不太确定我在做什么。
您可以按照此过程进行操作。这在某种程度上对我有用。希望这有帮助。
class customDrawerContentComponent extends Component {
render() {
return (
<Container>
<View style={{height: 250, backgroundColor: '#fff'}}>
<Body style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Image
style={styles.drawerImage}
source={require('./assets/img/logo.png')} />
</Body>
</View>
<Content>
<TouchableOpacity>
<View style={{marginVertical: 20, borderBottomWidth: 1, borderTopWidth: 1, borderBottomColor: '#ECE8EA', borderTopColor: '#ECE8EA', marginHorizontal: 20, flex: 1, justifyContent:'space-between', flexDirection: 'row'}}>
<View style={{marginVertical: 10, position:'relative'}} >
<Image source={require('./assets/img/avatar.png')}/>
</View>
<View style={{marginVertical: 10}}>
<Text style={{ fontSize: 16, color: '#D5D2D3' }}> Name</Text>
<Text style={{ fontSize: 18, color: '#959394' }}>Mobile </Text>
<Text style={{ fontSize: 18, color: '#959394' }}> Email </Text>
</View>
</View>
</TouchableOpacity>
<DrawerItems {...this.props} />
</Content>
</Container>
)
}
}
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen : HomeScreen,
navigationOptions: () => ({
title: `Vendor Show`,
drawerIcon: ({tintColor}) => (
<Image source={require('./assets/logo.png')} style={{height: 24, width: 24}}/>
)
})
},
Search: {
screen: SearchScreen,
navigationOptions: () => ({
title: `Search by`
})
},
Vendor: {
screen: HomeScreen,
navigationOptions: () => ({
title: `Vendor List`,
})
},
Notifications: {
screen: NotificationScreen
},
Events: EventsScreen,
Venue : {
screen: VenueAvailabilityScreen,
navigationOptions: () => ({
title: `Venue Availability`,
})
},
Settings: {
screen: SettingsScreen
}
}, {
drawerPosition: 'left',
contentComponent: customDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoure: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
drawerWidth: 320,
contentOptions: {
activeTintColor: '#fff',
inactiveTintColor: '#030303',
activeBackgroundColor: '#B90066',
inactiveBackgroundColor: '#fff',
itemsContainerStyle: {
marginHorizontal: 10
},
itemStyle: {
height: 40,
borderRadius: 60,
},
activeLabelStyle: {
fontSize: 20,
fontWeight: 'normal'
}
}
})
const AuthStackNavigator = createStackNavigator({
SplashScreen: { screen: SplashScreen },
ModalScreen:{
screen: ModalScreen
},
LocationNotification: {
screen: LocationNotificationScreen,
navigationOptions: () => ({
header: null
})
},
LoginScreen: {
screen : LoginScreen,
navigationOptions: () => ({
header: null
})
},
SignUpScreen: {
screen : SignUpScreen,
navigationOptions: () => ({
header: null
})
},
SignUpStepTwo: {
screen : SignUpStepTwo,
navigationOptions: () => ({
header: null
})
},
ForgotPassword: {
screen: ForgotPassword,
navigationOptions: () => ({
header: null
})
}
})
const AppSwitchNavigator = createSwitchNavigator({
AuthLoadingScreen: AuthLoadingScreen,
Auth: AuthStackNavigator,
App: {
screen: AppDrawerNavigator
}
})
const MyAppDrawer = createAppContainer(AppSwitchNavigator)
class App extends Component {
render() {
return <MyAppDrawer />
}
}
export default Appclass AuthLoadingScreen extends Component {
constructor(props){
super(props);
this.loadData();
}
render(){
return(
<View>
<ActivityIndicator />
</View>
);
}
async loadData(){
const userData = await AsyncStorage.getItem('user');
this.props.navigation.navigate(userData == 'user' ? 'App' : 'Auth');
}
}
const AppDrawerNavigator = createDrawerNavigator({
Home: { screen : HomeScreen },
Profile: { screen : ProfileScreen },
Single: { screen : SingleScreen },
});
const AuthStackNavigator = createStackNavigator({
Login: { screen: LoginScreen },
Register: { screen: RegisterScreen },
});
const AppSwitchNavigator = createSwitchNavigator({
AuthLoadingScreen: AuthLoadingScreen,
Auth: AuthStackNavigator,
App: {
screen: AppDrawerNavigator
}
});
export default createAppContainer(AppSwitchNavigator);