Question

我是新手反应原生和javascript，我试图将一些firebase数据渲染到一个平面列表中。我的firebase数据设置如下：

profiles:
    0:
     first: John
     last: Doe
     picture: "https://randomuser.me/api/portraits/men/4.jpg"
   ...

我已按照本教程：https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6 用于设置平面列表，但现在，我尝试修改数据，以便不使用随机生成的用户数据，而是从firebase中提取信息。

获取数据的一般代码区域是：

class FlatListDemo extends Component {
  constructor(props) {
  super(props);

this.state = {
  loading: false,
  data: [],
  page: 1,
  seed: 1,
  error: null,
  refreshing: false
};

}
componentDidMount() {
this.makeRemoteRequest();
}

makeRemoteRequest = () => {
const { page, seed } = this.state;
const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
this.setState({ loading: true });

fetch(url)
  .then(res => res.json())
  .then(res => {
    this.setState({
      data: page === 1 ? res.results : [...this.state.data, ...res.results],
      error: res.error || null,
      loading: false,
      refreshing: false
    });
  })
  .catch(error => {
    this.setState({ error, loading: false });
  });
 };

...

  render() {
return (
  <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
    <FlatList
      data={this.state.data}
      renderItem={({ item }) => (
        <ListItem
          roundAvatar
          title={`${item.name.first} ${item.name.last}`}
          subtitle={item.email}
          avatar={{ uri: item.picture.thumbnail }}
          containerStyle={{ borderBottomWidth: 0 }}
        />
      )}
      keyExtractor={item => item.email}
      ItemSeparatorComponent={this.renderSeparator}
      ListHeaderComponent={this.renderHeader}
      ListFooterComponent={this.renderFooter}
      onRefresh={this.handleRefresh}
      refreshing={this.state.refreshing}
      onEndReached={this.handleLoadMore}
      onEndReachedThreshold={50}
    />
  </List>
);
   }
 }

就像我说的那样，对于本机和js反应来说，我都是新手，所以我可以从十亿次谷歌搜索中获得任何帮助，我将不胜感激

使用FlatList呈现Firebase用户配置文件

0 个答案: