在Native Base中集成API：解决列表不显示接口数据的问题

嘿，我一眼就看出问题所在了——你混淆了Native Base的<List>组件和React Native原生FlatList的用法！

Native Base的基础<List>并不是一个数据驱动的列表组件（不像原生FlatList那样自带data和renderItem属性），它本质上只是一个样式容器。这就是为什么你能在控制台看到数据，但列表里啥都不显示的原因。

给你两种可行的解决方案：

方案一：用Native Base List + ListItem 手动遍历数据 #

这种方法适合基础场景，直接用map循环你的state数据，把每一项放在<ListItem>里（Native Base的列表项需要这个组件来保证样式和布局正常）：

import React, { Component } from 'react';
import {Container, List, ListItem, Text, StyleProvider} from 'native-base';
import getTheme from './native-base-theme/components';
import material from './native-base-theme/variables/material';

export default class App extends Component {
state = {
 data: []
};

componentDidMount() {
 this.fetchData();
}

fetchData = async () => {
  const response = await fetch("https://randomuser.me/api?results=10");
  const json = await response.json();
  this.setState({ data: json.results });
};

render() {
console.log(this.state.data);
return (
  <StyleProvider style={getTheme(material)}>
    <Container>
      <List>
        {/* 手动map遍历数据，每一项用ListItem包裹 */}
        {this.state.data.map((item, index) => (
          <ListItem key={index}>
            <Text>
              {`${item.name.first} ${item.name.last}`}
            </Text>
          </ListItem>
        ))}
      </List>
    </Container>
  </StyleProvider>
);}}

方案二：改用Native Base的FlatList组件 #

如果你的Native Base版本支持（大部分新版本都有），可以直接用它封装的FlatList，用法和原生FlatList完全一致，还能兼容Native Base的主题样式：

import React, { Component } from 'react';
import {Container, FlatList, ListItem, Text, StyleProvider} from 'native-base';
import getTheme from './native-base-theme/components';
import material from './native-base-theme/variables/material';

export default class App extends Component {
state = {
 data: []
};

componentDidMount() {
 this.fetchData();
}

fetchData = async () => {
  const response = await fetch("https://randomuser.me/api?results=10");
  const json = await response.json();
  this.setState({ data: json.results });
};

render() {
console.log(this.state.data);
return (
  <StyleProvider style={getTheme(material)}>
    <Container>
      <FlatList
        data={this.state.data}
        keyExtractor={(x, i) => i.toString()}
        renderItem={({ item }) => (
          <ListItem>
            <Text>
              {`${item.name.first} ${item.name.last}`}
            </Text>
          </ListItem>
        )}
      />
    </Container>
  </StyleProvider>
);}}

补充说明 #

之前你没接API时列表能正常工作，应该是直接在<List>里写了固定的<ListItem>元素，那时候List只是作为容器。但接API后你用了原生FlatList的data和renderItem属性给Native Base的List，它根本不识别这些props，所以数据自然渲染不出来啦。

内容的提问来源于stack exchange，提问作者Oviya R