Question

伙计们。我需要帮助。

我想使用DrawerLayoutAndroid和Navigator作为我的App导航器。我在这里遇到了问题。

我的代码是这样的，它不起作用。

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

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

这是主要代码。

renderScene：

  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>

)

Answer 1

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

<强>渲染

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

<强> RenderScene

_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组件;参见下面的例子）并且你已经完成了。

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

如何通过单击DrawerLayoutAndroid更改场景（导航器）

renderScene：

渲染部分：

1 个答案: