как бросить параметр id и отображать подробные данные на основе идентификатора в списке просмотра в реагировать родной - PullRequest
Новая
       15

как бросить параметр id и отображать подробные данные на основе идентификатора в списке просмотра в реагировать родной

0 голосов
/ 20 апреля 2020

Я учусь реагировать на родной язык, здесь у меня есть просмотр списка, который я получил через API, результаты ответа выглядят следующим образом: 

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

здесь я отображаю данные, используя просмотр списка, который показывает только awb. Я хочу спросить, как выдать параметр id, когда я нажимаю на просмотр списка, в котором отображаются детали? 

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>

, и я получил ошибку Ошибка: текстовые строки должны отображаться внутри компонента.

1 Ответ

0 голосов
/ 20 апреля 2020

вы передаете его неверным путем. Вот как вы должны его пропустить 

<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>
...