NavigatorIOS между файлами

Question

Я создаю приложение iOS с реагированием-native, и теперь я застреваю, пытаясь загрузить другой вид моего приложения, я собираюсь объяснить это более глубоко.

я получил представление индекса с ListView, чтобы загрузить список элементов, у меня есть код пункта будут перечислены в другом файле, так что я необходим файл, на мой взгляд индекс:

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

Тогда у меня есть функция визуализации:

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

И мой ListView компонент:

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

Еву rything работает хорошо до сих пор. Но теперь я хочу сделать это каждый раз, когда вы нажимаете на часть моего «Story», перейдите в другое представление через NavigatorIOS (насколько я знаю, это единственное представление для навигации между представлениями), поэтому я пытался для этого, но я нахожу проблему, что у меня есть мой индекс и мои представления элементов в отдельных файлах, поэтому я всегда получаю ошибки.

Буду очень признателен, если кто-то может помочь мне с этим.

Заранее спасибо.

EDIT

Вот код, который у меня есть в моем файле пункт «История»:

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) - например, укажите свойство «onTap». Это будет ваш обратный вызов. Затем в 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 в качестве mehod, он информирует местные магазины, и они выдает события, которые обрабатывается навигационным видом.