React Native中Axios获取API数据成功但FlatList无法渲染

接口请求成功、控制台能打印返回值但FlatList无内容，是代码中3处错误导致渲染阻塞/属性传值失败：

• 属性名不匹配：PokeAPI返回的列表项字段为name、url，不存在nome字段；同时父组件给Card传的prop名是nome，但Card组件内部读取的是props.name，两边字段完全不匹配，拿不到展示值。
• 静态资源引用错误：React Native的Metro打包器要求require必须传入静态字符串路径，不支持动态变量传参，你在Card组件中先把路径赋值给bgImg变量再传入require的写法会直接抛出资源加载错误，导致Card组件渲染失败。
• 缺失依赖导入：代码中KeyboardAvoidingView用到了Platform.OS判断平台，但没有从react-native中导入Platform变量，运行时会直接抛出Platform is not defined的引用错误，阻塞整个页面渲染。
• 额外布局隐患：FlatList未设置高度相关样式，在父View布局中可能出现高度计算为0的情况，导致内容不显示。

1. 补全缺失的Platform导入，修改App组件的react-native导入语句：

import {
  Text,
  View,
  StyleSheet,
  FlatList,
  KeyboardAvoidingView,
  TouchableWithoutFeedback,
  TextInput,
  Platform // 新增导入
} from 'react-native';

2. 修正FlatList的传参逻辑，匹配接口字段和Card组件的props定义，同时补充必填的keyExtractor属性，给FlatList加flex样式避免布局异常：

<FlatList 
  style={{flex: 1}}
  data={data}
  keyExtractor={(item) => item.name}
  renderItem={({ item }) => <Card name={item.name} /> }
/>

3. 修复Card组件的静态资源引用，删除动态路径变量，直接给require传入静态字符串：

export function Card(props){
  return (
        <View>
            {/* require直接传静态路径，删除之前的bgImg动态变量定义 */}
            <ImageBackground source={require('../../assets/#001.png')} style={styles.bgImg}>
                <View style={styles.cardComponent}>
                    <Text style={styles.idText}>#{props.id}</Text>
                    <Text style={styles.nomeText}>{props.name}</Text>
                </View>
            </ImageBackground>
        </View>
    );
}

注意：如果后续需要根据不同宝可梦加载不同背景图，不能用动态拼接路径的方式写require，需要提前把所有图片路径做静态映射表，再根据字段取值引用，否则Metro无法正常打包资源。

内容的提问来源于stack exchange，提问作者Guilherme Ramos