React Native-如何显示API中的数据？

Question

我是React Native的初学者，我正在使用The Movie Database API开发电影应用程序。 我设法从每部电影中提取信息。但是，我发现很难提取有关胶片浇铸的信息。我只使用函数“ map”提取了“ String”类型的数据。我想知道我们如何从演员那里提取照片并改善数据显示。

以下是API数据的示例：

  _displayFilm() {
    const { acteur } = this.state
    if (acteur != undefined) {
      return (
        <ScrollView style={styles.scrollview_container}>


          <Text style={styles.default_text}>Acteurs(s) :{"\n"}{acteur.cast.map(function(casts){
              return (  casts.name + '        ' + casts.character)
            }).join("\n")}
          </Text>


        </ScrollView>
      )
    }
  }

  render() {
    return (
      <View style={styles.main_container}>
        {this._displayLoading()}
        {this._displayFilm()}
      </View>
    )
  }
}

谢谢您的帮助

Answer 1

您可能希望使用FlatList而不是ScrollView显示此数据。

FlatList非常易于设置和管理。您可以在文档here中看到有关它们的更多信息。

下面是一些入门示例代码。您可以更新组件以合并以下内容。您将需要在组件主体中添加两个函数；一个是密钥提取器，另一个是渲染项（我已经适当地命名了它们）。然后在组件的render方法中添加FlatList的代码。

确保您还从FlatList导入react-native

...

_keyExtractor (item, index) {
  return index.toString();
}

 _renderItem ({ actor, index }) {
  return (<Text>{actor.name} - {actor.character}</Text>);
}



render() {
  return(
   ...
   <FlatList style={{ flex: 1 }}
      data={this.state.acteur.cast}
      keyExtractor={this._keyExtractor.bind(this)}
      renderItem={this._renderItem.bind(this)}
    />
   ...
  );
}

...

添加图像

要将图像添加到字符列表中，可以更新_renderItem 返回样式更好的项目的方法，该项目可能包括图像等。对于联网图像，请查看docs again，所有信息就在其中。

示例：

_renderItem({actor, index}) {
  return (
    <View style={{flexDirection: 'row'}}>
      <Image 
        source={`https://webaddress.com${actor.profile_path}`}
        style={{width:40, height:40}}
      />
      <Text>{actor.name} - {actor.character}</Text>
    </View>
  );
}

请记住要从Image导入react-native，并使用正确的网址作为网址，以便获取图像。

---

以上内容将使您入门，并且只需对代码进行一些细微更改，即可为您工作。