我已经构建了一个React Native应用,该应用在objects
上显示了不同的ListScreen
的列表。我现在想用onPress
在object
ViewScreen
值
我现在已经使用React-Redux和React-navigation构建了我的应用程序,但是我不确定是否应该将对象的数据存储在store
中,但是我不确定这是否正确使用Redux商店的方式(因为我目前将其用于购物车商品),或者是否还有其他方法将这些值传递给ViewScreen
。
这是我的应用程序的简化版
我已经制作了一个静态Data.js
文件来测试应用
Data.JS
`id: 0,
name: 'John Doe',
age: '15',
gender: 'male',
`
然后将数据导入ListScreen
List.js
`import { object} from './Data';
state = {
object,
};
renderRow = (rowData) => {
return (
<View>
<TouchableOpacity onPress={() => this.props.id.navigation.navigate('ViewScreen')}>
<View>
<Text>
{rowData.item.name}
</Text>
</View>
</TouchableOpacity>
</View>
)
}
render() {
return (
<View>
<FlatList
renderItem={this.renderRow}
keyExtractor={(item, index) => index.toString()}
/>
</View>
)
}
`
ViewScreen
` state = {
object,
};
renderRow = (rowData) => {
return (
<View>
<TouchableOpacity onPress={() => this.props.id.navigation.navigate('ViewScreen')}>
<View>
<Text>
{rowData.item.name}
{rowData.item.age}
{rowData.item.gender}
</Text>
</View>
</TouchableOpacity>
</View>
)
}
render() {
return (
<View>
<FlatList
renderItem={this.renderRow}
keyExtractor={(item, index) => index.toString()}
/>
</View>
)
}
`
我如何从这里捡起它?这样就可以在ViewScreen
答案 0 :(得分:1)
您快要完成了,只需将第二个参数添加到on press方法即可。
您将在下一个屏幕的数据属性中获取此数据。
renderRow = (rowData) => {
return (
<View>
<TouchableOpacity onPress={() =>
this.props.id.navigation.navigate('ViewScreen',{data : rowData})}>
<View>
<Text>
{rowData.item.name}
{rowData.item.age}
{rowData.item.gender}
</Text>
</View>
</TouchableOpacity>
</View>
)
}