React Navigation- 如何导航到数据源中的特定索引

React Navigation- How to Navigate to a specific index in a Datasource

我是 React Native 的新手,我正在尝试创建一个简单的食谱应用程序。在我需要从我的数据集中导航到特定食谱之前,我的应用程序一直在正常运行。我想要一个 singleRecipe.js 组件,我可以将数据和索引传递到其中,一旦用户在列表视图中单击该食谱项,它就会导航到正确的数据。

我已经在 NavigatorIOS 上看到了这个,但我不太清楚如何在新的 React Navigation 上完成它。如果有任何帮助,我将不胜感激。

这是我的食谱列表视图文件:

class RecipeScreen extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(RecipeListData)
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(RecipeListData) => <RecipeListItem {...RecipeListData} />}
        />
      </View>
    );
  }
}

RecipeListItem.js

const RecipeListItem = props => (
  <TouchableOpacity onPress={Actions.singleRecipe}>
    <View style={styles.container}>

      <Text>
        {`${props.name}`}
      </Text>
      <Text>
        {`${props.time}`}
      </Text>

    </View>
  </TouchableOpacity>
);

这是我希望将数据传递到其中的单一食谱页面。

class SingleRecipe extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/*// This is a single recipe I need to fill with the data from DataSource*/}
        <Text>
          This is a single recipe!
        </Text>

      </View>
    );
  }
}

我非常基本的数据集:

export default RecipeListData = [
  {
    "name": 'Breakfast Burritos',
    'time': "90 Minutes"
  },
  {
    "name": 'Peanut Butter Chicken',
    'time': "30 Minutes"
  },
  {
    "name": 'Sweet Potato Mash',
    'time': "20 Minutes"
  },
  {
    "name": 'Korma Curry',
    'time': "45 Minutes"
  },
  {
    "name": 'Protein Smoothie',
    'time': "20 Minutes"
  },
]

尝试:Actions.singleRecipe({ data: rowData })

然后在 SingleRecipe.js 您应该可以像这样访问它:
<Text>{this.props.data.name}</Text><Text>{this.props.data.time}</Text>