使用来自 API 的动态数据创建水平滚动视图答案

【问题标题】：Creating horizontal scrollview with dynamic data from API使用来自 API 的动态数据创建水平滚动视图
【发布时间】：2018-12-05 19:43:02
【问题描述】：

我有一个水平滚动视图，里面有多个视图，视图中的数据是从 API 调用中检索的，所以我不知道滚动视图中有多少视图，有没有更好的方法实施这个？如果可能的话，我怎样才能将其转换为平面列表？

state = { data: [] };

async componentDidMount(){
      axios.get('http://reduxblog.herokuapp.com/api/posts')
       .then((response) =>  { this.setState({ data: response.data})});
    }

<ScrollView horizontal={true} style={{width: '100%'}}>
  <View>
    <Text>
      {this.state.data.title}
    </Text>
  </View>
</ScrollView>

【问题讨论】：

标签： api react-native scrollview react-native-flatlist

【解决方案1】：

你说得对，FlatList 是动态数据的更好解决方案。

这是一个基于您正在使用的数据的简短示例。

class MyFlatList extends React.Component {

  constructor(props) {
    super(props);
    this.state = { data:[] };
  }

  async componentDidMount(){
    axios.get('http://reduxblog.herokuapp.com/api/posts')
     .then((response) =>  { this.setState({ data: response.data})});
  }

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

   _renderItem ({ item, index }) {
    return (<Text>{item.title} - {item.categories}</Text>);
  }

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

如您所见，FlatList 需要将几个道具传递给它。其中三个始终是必需的：keyExtractor、renderItem 和 data

首先是keyExtractor

用于在指定索引处为给定项目提取唯一键。键用于缓存和作为响应键来跟踪项目重新排序

第二个renderItem。当前的 renderItem 返回一个非常简单的组件，只需花费一些时间和样式，就可以构建一些非常酷的东西。

从数据中获取一个项目并将其呈现到列表中。

数据应该通过 data 属性传递给 FlatList。您将数据存储在组件状态中，因此我们可以将其作为this.state.data 传递。 FlatList 将使用它来构造列表。

最后，我们需要将 true 传递给水平属性，以便 FlatList 将构造一个水平列表而不是垂直列表。

更多信息可以在FlatList 的文档中找到。我建议你看看那里，看看你能想出什么。

最后确保你已经从 react-native 导入了 FlatList、View 和 Text，否则你会遇到一些错误需要处理。我还会查看您的 axios 请求，因为您似乎没有发现该函数可能遇到的任何错误。

【讨论】：