Question

我是主屏幕上的本机反应的新手，我现在设法使用redux和axios从API提取数据

当我按图像时，它将带我进入EventInfo屏幕，并且显示信息取决于Postman APIrequest POST中的动态ID，并使用此{“ id”：“ 5680”} 显示信息

    _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});
}

之后，您可以像这样在eventInfo组件中获取ID。

this.props.navigation.state.params.id

提示：：如果在每次渲染时绑定到render函数内部，则始终将其函数绑定到构造函数中，它将创建一个新实例，这将导致性能问题

Answer 2

要从'eventInfo'路线中获取相应的详细信息，还必须添加id细节作为该路线的一部分。

然后在componentDidMount的{{1}}中，您可以从eventInfo route component获取id，并使用route来获取细节并进行动态渲染。

具体语法取决于所使用的软件包，但这可能是一个普遍的想法。

此外，如果有机会，您不能将id作为路由参数传递，还可以在导航之前从eventInfo组件中将全局值（例如redux-store状态）设置为相应的id，请阅读像上面一样在componentDidMount内部使用axios从api进行状态获取和获取。

从API响应本地获取数据取决于动态ID

2 个答案: