如何获取对象ID onPress并将该值传递给React Native中的新屏幕?

时间:2019-01-18 10:31:30

标签: reactjs react-native react-redux react-navigation

我已经构建了一个React Native应用,该应用在objects上显示了不同的ListScreen的列表。我现在想用onPressobject

上显示一个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

中显示该值

1 个答案:

答案 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>
    )
  }