代码之家  ›  专栏  ›  技术社区  ›  Salman

如何获取按下时的对象ID并将该值传递到react native中的新屏幕?

  •  0
  • Salman  · 技术社区  · 6 年前

    我已经构建了一个反应本地应用程序,它显示了一个不同的列表 objects ListScreen . 我现在想和 onPress 展示一 object 价值观 ViewScreen

    我已经使用react redux和react navigation构建了我的应用程序,现在我不确定是否应该将对象的数据存储在 store 但我不确定这是否是使用Redux Store的正确方法(因为我目前将其用于购物车项目),或者是否有其他方法将这些值传递给 视窗 .

    这是对我的应用程序的简化:

    我做了静电 Data.js 测试应用程序的文件

    数据JS

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

    然后我将数据导入 列表屏幕

    清单

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

    我怎么从这里取?以便在 视窗

    1 回复  |  直到 6 年前
        1
  •  1
  •   Salman    6 年前

    你就快到了,只需把第二个参数添加到你的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>
        )
      }