React Native使用props传递数据时文本无法显示的问题排查

你的代码核心问题出在FlatList的renderItem回调函数上，具体原因和修复方案如下：

问题根源 #

App文件中renderItem的箭头函数使用大括号{}包裹逻辑，但没有显式返回<GoalItem>组件，导致React Native无法渲染目标组件，自然看不到传递的文本内容。此外data={(list)}中的多余括号可以简化。

修复代码 #

组件文件（无需修改，确认样式正常即可） #

function GoalItem(props) {
    return( 
          <Text style={Styles.prop}>{props.text}</Text>  
    );
}
export default GoalItem;

App文件（修复renderItem逻辑） #

有两种可行的修复方式：

1. 显式添加return语句

<FlatList 
    data={list} 
    renderItem={(itemData) => {
        return <GoalItem text={itemData.item.value} />;
    }}
    keyExtractor={(item, index) => item.id}
/>

2. 使用箭头函数隐式返回（更简洁）

<FlatList 
    data={list} 
    renderItem={(itemData) => <GoalItem text={itemData.item.value} />}
    keyExtractor={(item, index) => item.id}
/>

额外检查项 #

• 确认list数组中的每一项都包含value字段，且字段值不为空字符串或undefined
• 检查Styles.prop样式，避免设置display: none、文字颜色与背景色一致等导致文本不可见的配置

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