android - 在 react native 的 ListView 中简单转到页面

Question

如何从 ListView 中单击一行并访问该内容。

我已将所有内容封装在导航器中。

renderScene(route, navigator) {
  var routeId = route.id;
  if (routeId === 'SplashPage') {
   return (
      <SplashPage
      navigator={navigator} />
   );
  }
  if (routeId === 'App') {
    return (
      <App
      navigator={navigator} />
  );
 }
}

足够简单，但是当我在应用程序页面中渲染 ListView 时，我似乎无法获得要传递 Prop 的行的正确上下文。

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


renderScene(route, navigator) {
 render(
    // If I run this.profilePage() from here, it works
    <ListView
    dataSource={this.state.feed}
    renderRow={this._renderRow} // need to pass the navigator here somehow?
     />
  );
}

 _renderRow(feeditem){
   return (
     <TouchableOpacity 
        onPress={this.profilePage}><Text>Test to click</Text>
    // Also tried {this.profilePage.bind(this)} - didnt work
     </TouchableOpacity>
   )
 }

 profilePage(){
   this.props.navigator.push({
      id: 'ProfilePage',
      name: 'Profile',
   });
   //'this' however is always null
 }

如何正确地将导航器上下文传递到行？ 还是我做错了？

Answer 1

尝试这样的事情。将导航器分解为它自己的组件，在我看来会更容易推理。

导航组件:

var Nav = React.createClass({

  renderScene(route, navigator) {
    var routeId = route.id;
    if (routeId === 'SplashPage') {
      return ( <SplashPage navigator={navigator} /> );
    }
    // MORE ROUTES BELOW
  }

  render() {
   return (
    <Navigator
      initialRoute={{ id: 0, component: List, name: 'List' }}
      renderScene={this.renderScene.bind(this)}
      navigator={navigator} />
    );
  }

})    

列表组件:

var List = React.createClass({

  _renderRow(feeditem){
   return (
      <TouchableOpacity 
        onPress={ () => this.profilePage() }><Text>Test to click</Text>
      </TouchableOpacity>
    )
  }

 profilePage(){
   this.props.navigator.push({
      id: 'ProfilePage',
      name: 'Profile',
   });
 }

 render() {
   return (
     <ListView
        dataSource={this.state.feed}
        renderRow={this._renderRow}
      />
   )
 }
})