реагировать на выборку собственных данных из API зависит от динамического идентификатора

Question

Я новичок в своем родном экране на домашнем экране. Теперь мне удается получать данные из API с использованием приставок и аксиом. Что мне нужнодинамический идентификатор в Postman APIRequest POST и возьмите этот {"id": "5680"} для отображения информации

изображения из API

    _onLImagePressed() {
        this.props.navigation.navigate('eventInfo');

    }

  _renderListItem = ({ item }) => {
    Moment.locale('en');
    var dt = item.date;
    return (   <View style= {{flex: 1, flexDirection: 'row',marginBottom: 3}}>
        <TouchableOpacity  onPress={this._onLImagePressed.bind(this)}>
        <Image
          style={{width: 80, height: 80,margin: 5}}
          source={{uri: item.imageUrl}}
        />

        </TouchableOpacity>
      <View style={{flex: 1, justifyContent: 'center', marginLeft:5}}>
      <Text style={{fontSize: 18, color:'green', marginBottom:15}}>
      {item.id}</Text>
        <Text style={{fontSize: 16, color:'red'}}>
        {Moment(dt).format('DDD MMM YYYY')}</Text>
      </View>

      </View>)

  }

Answer 1

Чтобы получить соответствующую информацию из маршрута 'eventInfo', вы также должны добавить детали id как часть маршрута.

Затем в componentDidMount из eventInfo route component вы можетеполучите id из route и используйте axios для извлечения деталей и динамического рендеринга.

Конкретный синтаксис будет зависеть от используемых пакетов, но это может быть общей идеей.

Кроме того, если по какой-либо причине вы не можете передать идентификатор в качестве параметра маршрута, вы также можете установить глобальное значение (например, состояние хранилища с избыточностью) для соответствующего идентификатора перед навигацией и из компонента eventInfo, прочитайтеэто состояние и выбор из API, используя axios внутри componentDidMount, как описано выше.

Answer 2

Сначала вам нужно передать свой идентификатор из функции, которую вы выполняете в onPress, и передать свой идентификатор своему компоненту навигации

{ onPress() => this._onLImagePressed({item.id}) }
_onLImagePressed(id) {
    this.props.navigation.navigate('eventInfo', { id: id});
}

, а затем вы можете получить свой идентификатор в компоненте eventInfo, как это.

this.props.navigation.state.params.id

Совет :: Всегда связывайте свою функцию в конструкторе, если вы связываете внутри своей функции рендеринга при каждом рендеринге, это создаст новый экземпляр, что вызовет проблемы с производительностью