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

Question

我构建了一个 React Native 应用程序，它在ListScreen上显示了不同objects的列表。我现在想用onPress在ViewScreen上显示一个object值

我已经使用 React-Redux

和 React-navigation 构建了我的应用程序，现在我不确定我是否应该将对象的数据存储在store中，但我不确定这是否是使用 Redux 商店的正确方法（因为我目前将其用于购物车项目）或者是否有另一种方法将这些值传递给ViewScreen。

这是我的应用程序的简化：

我制作了一个静态Data.js文件来测试应用程序

数据.JS

`id: 0, 
 name: 'John Doe', 
 age: '15',
 gender: 'male',
`

然后我将数据导入ListScreen

列表.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>
    )
  }
`

视图屏幕

` 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

Answer 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>
    )
  }