如何通过单击 DrawerLayoutAndroid 更改场景(导航器) [英] How can I change the scene(Navigator) by click DrawerLayoutAndroid

问题描述

伙计们，我需要帮助.

我想使用 DrawerLayoutAndroid 和 Navigator 作为我的应用程序导航器.我这里有问题.

I want use DrawerLayoutAndroid and Navigator as my App navigator. And I have a problem here.

我这样编码，但它不起作用.

I code like this,and it doesn't work.

<TouchableHighlight>
   <Text style={styles.menu} onPress={() => this.refs['myNavigator'].navigator.push({id:'List',name:'List Page'})}>Menu Item1</Text>
</TouchableHighlight>

如何通过单击 DrawerLayoutAndroid 更改场景(导航器).希望有人帮忙...

How can I change the scene(Navigator) by click DrawerLayoutAndroid. Hope somebody help...

这是主要代码.

  renderScene(route, navigator) {
    var routeId = route.id;
    if (routeId === 'SplashPage') {
      return (
          <SplashPage
              navigator={navigator} />
      );
    }
    if (routeId === 'MainPage') {
      return (
          <MainPage openDrawer={this.openDrawer.bind(this)}
              navigator={navigator} {...route.passProps}/>
      );
    }
    if (routeId === 'List') {
      return (
          <ListComponent
              navigator={navigator} {...route.passProps} />
      );
    }
    if (routeId === 'Detail') {
      return (
          <DetailComponent
              navigator={navigator} {...route.passProps} />
      );
    }
    if (routeId === 'Share') {
      return (
          <ShareComponent
              navigator={navigator} {...route.passProps} />
      );
    }
  }

<小时>

渲染部分:

var navigationView = (
        <View style={{flex: 1, backgroundColor: '#161616'}}>
          <Text style={styles.menuTitle}>Nav Title</Text>
          <TouchableHighlight >
            <Text style={styles.menu}>Home</Text>
          </TouchableHighlight>
          <TouchableHighlight>
            <Text style={styles.menu} onPress={() => this.refs['myNavigator'].props.navigator.push({id:'List',name:'List Page'})}>Menu Item1</Text>
          </TouchableHighlight>
          <TouchableHighlight>
            <Text style={styles.menu}>Menu Item2</Text>
          </TouchableHighlight>
        </View>
    );


return (

<DrawerLayoutAndroid
    drawerWidth={260}
    ref={'DRAWER'}
    drawerPosition={DrawerLayoutAndroid.positions.left}
    renderNavigationView={() => navigationView}>
    <Navigator
        ref={'myNavigator'}
        initialRoute={{id: 'SplashPage', name: 'SplashPage'}}
        renderScene={this.renderScene.bind(this)}
        navigator={this.props.navigator}
        configureScene={(route) => {
          if (route.sceneConfig) {
            return route.sceneConfig;
          }
          return Navigator.SceneConfigs.FloatFromRight;
        }}
        />
</DrawerLayoutAndroid>

)

推荐答案

当我用相反的方式编码时，我得到了它:

I got it working when coded the other way around:

渲染

render() {
    return (
      <Navigator 
        ref="navigator"
        initialRoute={{name: "creategame", id: "creategame"}}
        renderScene={this._renderScene.bind(this)}
        configureScene={() => ({...FadeAndroid})}
      />
    )
}

渲染场景

_renderScene(route, navigator) {
    // Put your logic here selecting a component/scene based on route.id
    let contentView = ...

    return (
       <DrawerLayoutAndroid
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => <MenuView route={routeId} navigator={navigator} />}>
            {contentView}
       </DrawerLayoutAndroid>
    )
}

然后最后调用 navigator.push(它作为道具传递给我的 MenuView 组件；参见下面的示例)，你就完成了.

Then finally call navigator.push (which is passed as a prop to my MenuView component; see example below) and you're done.

菜单视图

class MenuView extends Component {

  constructor() {
    super();
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([])
    };
  }

  componentDidMount() {
    var menuItems = [
      {title: 'xxx', id: 'x'},
      {title: 'yyy', id: 'y'},
      ... and so on
    ]

    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(menuItems)
    });
  }

  _renderMenuRow(rowData) {
    return (
      <TouchableHighlight onPress={this._onPress.bind(this, rowData.id)}>
          <Text style={styles.menuRowText}> {rowData.title} </Text>
      </TouchableHighlight>
   );
  }

  _onPress(id) {
    this.props.navigator.push({
     id: id,
    });
  }

  render() {
    return (
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderMenuRow.bind(this)}
    );
  };
}

这篇关于如何通过单击 DrawerLayoutAndroid 更改场景(导航器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！