React Native开发中用于实现网格按钮的FlatList组件无法显示

• 高度计算链断裂。FlatList是带虚拟滚动的组件，自身不会主动撑开父容器高度，必须靠父级传递明确的flex权重。当前代码里最外层根View没有设置flex:1，嵌套FlatList的中间View也没有高度/ flex配置，导致FlatList拿到的可用渲染高度为0，就算数据源完全正确，也不会渲染出任何内容。
• 未开启网格渲染配置。当前FlatList默认是单列垂直列表模式，即便item写了flex:1，也会以整行宽度展示，达不到预期的多列按钮网格效果。
• 样式冗余冲突。item样式中手动添加的flex:1是多余配置，FlatList会根据列数自动分配单元格的横向占比，手动设置flex反而会触发高度计算异常。

1. 给最外层根View补充flex:1样式，让根节点占满整个屏幕高度，打通从屏幕到FlatList的高度传递链路。
2. 给包裹FlatList的中间View补充flex:1配置，避免容器高度塌缩。
3. 给FlatList添加numColumns={2}参数，开启双列网格渲染（适配当前4个功能按钮的总数量）。
4. 移除item样式中多余的flex:1配置，消除布局冲突。

// 样式表新增根容器配置
const styles = StyleSheet.create({
  rootContainer: {
    flex: 1
  },
  // 调整item样式，移除多余的flex:1
  item : {
    backgroundColor : '#030303',
    alignItems: 'center',
    justifyContent : 'center',
    margin : 1,
    height : Dimensions.get('window').width / 3
  }
})

// 渲染逻辑调整
render() {
  return (
    <View style={styles.rootContainer}>
      <Text style={styles.welcomeText}> Welcome , XXXXXXXX!  - XXXXX  </Text>
      <Text style={styles.balanceText}> 470,000.00 </Text>
      <View
        style={{
            borderBottomColor: '#696b69',
            borderBottomWidth: 1,
        }}
      />
      <View style={{flex: 1}}>
          <FlatList
            data={data}
            style={styles.container}
            renderItem={this.renderItem}
            numColumns={2}
          />
      </View>
    </View>
  );
}

注意事项：RN中所有虚拟滚动组件（FlatList、ScrollView、SectionList）都不具备自动撑开父容器高度的特性，只要父级链路有某一层没有明确高度或flex权重，组件的渲染区域就会坍缩为0，出现“数据源正确但无内容显示”的假象。

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