使用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和数据

首先keyExtractor

  

用于为指定索引处的给定项目提取唯一键。   键用于缓存，并作为反应键来跟踪商品的重新排序

第二renderItem。当前的renderItem返回一个非常简单的组件，需要花费一些时间并设计出一些很酷的样式。

  

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

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

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

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

最后确保已从react-native导入FlatList，View和Text，否则将遇到一些错误。我还会查看您的axios请求，因为您似乎没有捕获到函数可能会遇到的任何错误。