如何在反应本机的listview中抛出id参数并根据id显示详细数据

Question

我正在学习react native，这里有一个listview是我通过API获取的，响应结果如下：

{
    "status": 200,
    "error": false,
    "data": [
        {
            "id": "1",
            "awb": "RJCSS1728999298839828",
            "name": "amar",
            "destination": "Bandung"
        }
    ]
}

这里我使用只显示 awb 的列表视图显示数据。我想请问一下，如何抛出id参数，点击listview时显示详情？

constructor(){
      super()
      this.state = {
        dataOrigin: [],
        isLoading : true
  }
}

componentDidMount(){
      const url = 'https://example.com/get'
      fetch(url)
      .then((response)=> response.json())
      .then((responseJson)=>{
          this.setState({
              dataSource: responseJson.data,
              isLoading : false
          })
      })
      .catch((error)=>{
          console.log(error)
      })
  }

 render() {
      return (
          <List keyExtractor = {(item, index)=> index.toString()} 
          dataArray={this.state.dataSource}  
          renderRow={(item) =>
         <ListItem icon style={{marginBottom: 20,marginTop: 5}}>
             <Body>
             <TouchableOpacity>
                  <Text>{item.awb}</Text>
             </TouchableOpacity>
             </Body>
        </ListItem>
   }>
</List>
)

我试过添加这个

<TouchableOpacity 
    id={item.id} onPress={() => this.props.navigation.navigate('tracking', { id: id})}>
    <Text>{item.awb}</Text>
   </TouchableOpacity>

我收到一个错误 错误：文本字符串必须在组件内呈现。

Answer 1

你传错了way.Here你应该怎么传

<TouchableOpacity 
    onPress={() => this.props.navigation.navigate('tracking', { id: item.id})}>
    <Text>{item.awb}</Text>
   </TouchableOpacity>

如果你想带所有的东西，你可以这样传递

<TouchableOpacity 
   onPress={() => this.props.navigation.navigate('tracking', {
    id: item.id, 
    item: item})}>
   <Text>{item.awb}</Text>
 </TouchableOpacity>

如何在反应本机的listview中抛出id参数并根据id显示详细数据

how to throw id parameter and display detailed data based on id at listview in react native

reactjs

api

react-native

native