Question

我需要在左上角显示一个汉堡菜单，单击该菜单会打开一个左侧抽屉。我尝试实现下一篇文章中提供的示例，但是在实现该示例时它似乎不起作用：

https://medium.com/@mollyseeley/a-simple-react-native-navigation-drawer-ba10fc203ad

您能在上面的url中确定实现的问题吗，还是我很可能弄乱了我如何实现示例的方式？您是否可以推荐这种类型的实现的其他示例网址？

Answer 1

尝试使用这种方式。

const LoginNavigator = createStackNavigator({
    Login: {
        screen: Login,
        navigationOptions: {
          header: null,
        }
    },
    SignUp: {
        screen: SignUp,
        navigationOptions: {
          header: null,
        }
    }
});

class NavigationDrawerStructure extends Component {

  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
      };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          <Image
            source={require('../Img/hamburger.png')}
            style={{ width: 25, height: 25, marginLeft: 20, tintColor: '#ffffff' }}
         />
        </TouchableOpacity>
      </View>
    );
  }
}

const HomeActivity_StackNavigator = createStackNavigator({
    Home: {
    screen: Main,
    navigationOptions: ({ navigation }) => ({
      title: 'Dashboard',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff'
    }),
  },
}, {headerLayoutPreset: 'center'});

const DrawerNavigators = createDrawerNavigator({
  //Drawer Optons and indexing
  Main: {
    screen: HomeActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Dashboard',
    }
  }
});

const NonDrawerNavigators = createStackNavigator({
    TaskView: {
        screen: TaskView,
        navigationOptions: {
            title: 'Task',
            headerStyle: {
                backgroundColor: '#FF9800',
            },
            headerTintColor: '#fff'
        }
    },
    TeamView: {
        screen: TeamView,
        navigationOptions: {
            title: 'Team',
            headerStyle: {
                backgroundColor: '#FF9800',
            },
            headerTintColor: '#fff'
        }
    }
}, {headerLayoutPreset: 'center'});

const AppNavigator = createStackNavigator({
    drawerStack: {
        screen: DrawerNavigators,
        navigationOptions: {
            header: null
        }
    },
    nonDrawerStack: {
        screen: NonDrawerNavigators,
        navigationOptions: {
            header: null
        }
    }
});

export default createAppContainer(createSwitchNavigator({
    SplashScreen: SplashScreen,
    loginStack: LoginNavigator,
    homeStack: AppNavigator
    }, {
       initialRouteName: 'SplashScreen'
   })
);

试图在左上角显示一个汉堡菜单以打开左侧抽屉？

1 个答案: