Question

我正在尝试使用DrawerNavigator在应用程序中的某些登录页面之间导航。当我向右滑动时，它会打开，但是当我选择一个项目时，它不会改变视图。

我正在Android设备上运行该应用程序。

App.js

import React, { Component } from 'react';
import RootNavigator from './navigation/AppNavigator';


class App extends Component {

  render() {
    return <RootNavigator />
  }
}


export default App;

AppNavigator.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');

登录后，我将重定向到首页，这是我向右滑动时看到的内容，但是单击它们不会改变任何内容。

DrawerNavigator

这是我的第一个反应本地项目，所以我不太确定自己在做什么。

Answer 1

您可以按照此过程进行操作。这在某种程度上为我工作。希望这会有所帮助。

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 App

Answer 2

class 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);

React-native Drawer Navigator打开，但单击项目不会更改视图

2 个答案: