反应从API依赖于动态ID天然取数据

Question

我是新的反应在我的主屏幕原生我设法提取采用了终极版和爱可信现在我想从API数据

当我按下图像就带我去EventInfo屏幕和显示的信息取决于邮差的APIrequest POST动态ID，并借此{“ID”：“5680”}显示信息

image from 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

首先，你需要从你在onPress执行功能，通过您的ID和你的ID传递到您的导航组件

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

之后，你可以得到你的ID在这样eventInfo组件。

this.props.navigation.state.params.id

如果你绑定你的渲染函数中提示::始终绑定的功能，在你的构造上的每个渲染它会创建一个新的实例，这将导致性能问题

Answer 2

要获得从'eventInfo'路线相应的细节，你还必须添加id细节作为路线的一部分。

然后在componentDidMount的eventInfo route component，你可以从id的route和使用axios获取的细节和动态呈现。

具体的语法将取决于包被使用，但是这可能是一个总体思路。

此外，如果任何机会，你无法通过ID作为路线PARAM，你也可以设置一个全局值（如终极版店内状态），以相应的ID导航之前从eventInfo组件，阅读状态，并获取从API使用像上面componentDidMount内部Axios公司。