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

Question

我有一个水平滚动视图，里面有多个视图，视图中的数据是从 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>

Answer 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

Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering

第二renderItem。当前的 renderItem returns 是一个非常简单的组件，只需一点时间和样式就可以构建出非常酷的东西。

Takes an item from data and renders it into the list.

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

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

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

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

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

Creating horizontal scrollview with dynamic data from API

api

scrollview

react-native

react-native-flatlist