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>
我是 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>