Question

我正在使用react-native构建一个iOS应用程序，现在我不得不尝试加载我的应用程序的另一个视图，我将更深入地解释这一点。

我有一个带有ListView的索引视图来加载项目列表，我将该项目的代码列在另一个文件中，所以我在索引视图中需要该文件：

var Story = require('./story');

然后我有一个渲染功能：

renderStory: function(story) { 
  return (
    < Story story={ story } />
  ); 
},

我的ListView组件：

<ListView 
  dataSource={this.state.dataSource} 
  renderRow={this.renderStory}
  style={ styles.content } />

到目前为止一切运作良好。但是现在，我想每次点击我的“故事”项目的一部分，通过NavigatorIOS转到另一个视图（据我所知它是唯一在视图之间导航的视图）所以我一直在尝试要做到这一点，但我发现我的索引和我的项目视图在单独的文件中的问题，所以我总是得到错误。

如果有人可以帮我解决这个问题，我将非常感激。

提前致谢。

修改

以下是我在“故事”项目文件中的一些代码：

var Story = React.createClass({
  gotoIndividualStory: function(){
    console.log(this.props);
    // this.props.navigator.push({
    //   title: 'Individual Story',
    //   component: Individual,
    // });
  },

  render: function() {
    var story = this.props.story;

    return (
      <View style={ styles.story }>
        <NavigatorIOS
          initialRoute={{
            component: Individual,
            title: 'List',
          }} />

        <View style={ styles.storyHeader }>
          <TouchableHighlight onPress={ () => this.gotoIndividualStory() }>
            <Image style={ styles.storyImage } source={ { uri: story.image_thumb_url } } />
          </TouchableHighlight>
        </View>

Answer 1

您可以在这里制作几种不同的方法。

1）简单，但在架构上有点逊色：让你的Story类获取一个函数属性（React.PropTypes.func） - 命名属性＆＃34; onTap＆＃34;例如。这将是你的回调。然后在你的renderStory中添加回调。它会使你的renderRow看起来更像

renderRow={(rowData) =>  this.renderStory(rowData, this.onTap)}

你的renderStory看起来更像：

renderStory: function(story, onTap) {
   return (<Story story={story} onTap={onTap});
}

当你真正点击故事时进行回调：

 onTap(story)

2）更好的架构将是使用Flux架构（例如）（https://facebook.github.io/flux/docs/overview.html） - 您将点击发送给Dispatcher作为方法，它通知本地商店并发出由导航视图处理的事件。 / p>

文件之间的NavigatorIOS

1 个答案: