react native：如何使用 DrawerLayoutAndroid 在视图之间创建带有导航的侧边菜单

Question

我是 React Native 的新手，我正在尝试使用 DrawerLayoutAndroid 创建一个带有导航的侧边菜单。我已经查过了，但没有真正找到任何有用的东西。这是我现在所拥有的：

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  DrawerLayoutAndroid,
  StyleSheet,
  TouchableHighlight,
  Text,
  Navigator,
  View,
  Image
} = React;
var ContentView = React.createClass({
  render() {
    return(
      <View>
        <Text style={styles.contentStyle}>Hello</Text>
      </View>
      );
  }
});
var Test = React.createClass({
  openD() {
    this.refs['DRAWER'].openDrawer();
  },
  render() {
    var navigationView = (
      <View style={styles.contentStyle}>
        <Text>First View</Text>
        <Text>Second View</Text>
        <Text>Third View</Text>
      </View>
    );

    return (
      <DrawerLayoutAndroid
        drawerWidth={300}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        ref={'DRAWER'}
        renderNavigationView={() => navigationView}>
        <View style={{flex: 1, backgroundColor: 'white'}}>
          <TouchableHighlight onPress={this.openD} underlayColor='transparent'>
            <Image 
            source={{uri:'https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png'}} 
            style={styles.img}/>
          </TouchableHighlight>
          <ContentView/>
        </View>
      </DrawerLayoutAndroid>
    );
  }
});

它是什么样子的： Main View

Drawer

我要求一个简单的示例，向此代码添加导航，以便它可以在视图之间切换。在此先感谢并为这些菜鸟问题感到抱歉。

Answer 1

您只需要稍微更改代码即可呈现 Navigator 组件本身，并将您已有的内容放入它的 renderScene 方法中。应该是这样的：

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  DrawerLayoutAndroid,
  StyleSheet,
  TouchableHighlight,
  Text,
  Navigator,
  View,
  Image
} = React;
var ContentView = React.createClass({
  render() {
    return(
      <View>
        <Text style={styles.contentStyle}>Hello</Text>
      </View>
      );
  }
});
var Test = React.createClass({
  openD() {
    this.refs['DRAWER'].openDrawer();
  },
  renderScene = (route, navigator) => {
    var navigationView = (
      //Here you can pass the navigator objects to your views to push/pop them and navigate
      <View style={styles.contentStyle}>
        <Text>First View</Text>
        <Text>Second View</Text>
        <Text>Third View</Text>
      </View>
    );

    return (
      <DrawerLayoutAndroid
        drawerWidth={300}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        ref={'DRAWER'}
        renderNavigationView={() => navigationView}>
        <View style={{flex: 1, backgroundColor: 'white'}}>
          <TouchableHighlight onPress={this.openD} underlayColor='transparent'>
            <Image 
            source={{uri:'https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png'}} 
            style={styles.img}/>
          </TouchableHighlight>
          <ContentView/>
        </View>
      </DrawerLayoutAndroid>
    );
  }

  render() {
    return (
    <Navigator
      renderScene={this.renderScene}
    />
  )}
});