React native 如何通过单击DroperLayoutAndroid更改场景（导航器）

伙计们，我需要帮助

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

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

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

this.refs['myNavigator'].navigator.push（{id:'List'，name:'List Page'}）}>菜单项1

如何通过单击DroperLayoutAndroid更改场景（导航器）。 希望有人能帮忙

这是主要代码

---

渲染场景：

renderScene（路线、导航器）{
var routeId=route.id；
如果（routeId=='SplashPage'）{
返回(
);
}
如果（routeId=='MainPage'）{
返回(
);
}
如果（routeId==='List'）{
返回(
);
}
如果（routeId==='Detail'）{
返回(
);
}
如果（routeId==='Share'）{
返回(
);
}
}

---

渲染部分：

var导航视图=(
导航标题
家
this.refs['myNavigator'].props.navigator.push（{id:'List'，name:'List Page'}）}>菜单项1
菜单项2
);
返回(
导航视图}>
{
if（路由场景图）{
返回路线.sceneConfig；
}
从右侧返回Navigator.sceneconfig.floatfrom；
}}
/>
)

当我用另一种方式编码时，它开始工作了：

渲染

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

render（）{
返回(
（{…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>
    )
}

\u渲染场景（路线、导航器）{
//将逻辑放在此处，根据route.id选择组件/场景
让contentView=。。。
返回(
}>
{contentView}
)
}

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

菜单视图

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

类菜单视图扩展组件{
构造函数（）{
超级（）；
var ds=新的ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
数据源：ds.cloneWithRows（[]）
};
}
componentDidMount（）{
变量菜单项=[
{title:'xxx'，id:'x'}，
{title:'yyy'，id:'y'}，
等等
]
这是我的国家({
数据源：this.state.dataSource.cloneWithRows（menuItems）
});
}
_renderMenuRow（行数据）{
返回(
{rowData.title}
);
}
_新闻组（id）{
这个是.props.navigator.push({
id:id，
});
}
render（）{
返回(
_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>
    )
}

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