布局与列表

这一课你将能做到

1. 用 Flexbox 在 RN 里实现水平排列、居中、两端对齐、等分等常见布局
2. 用 FlatList 渲染千级长列表且保持流畅，配齐分隔线、空状态、下拉刷新、上拉加载
3. 用 SectionList 实现分组列表，并说出 FlatList 虚拟化的原理和优化参数

为什么要学

移动端 90% 的界面就两种：静态布局和列表。Flexbox 管前者，FlatList 管后者。上一课的 ScrollView 只能应付一屏以内的内容；真实 App 的列表动辄几百上千条，不用虚拟化列表就是卡死。这一课是 RN 开发中日常使用频率最高的一课。

人话：ScrollView 像一次性把所有行李搬上车——东西一多车就压垮；FlatList 像摩天轮，只有转到眼前的座舱里坐人，看不见的座舱是空的，所以装一万条数据也照样流畅。

先建立图像

import { FlatList, Text, View, StyleSheet } from 'react-native';

const DATA = Array.from({ length: 1000 }, (_, i) => ({ id: String(i), title: `第 ${i + 1} 条消息` }));

export default function App() {
  return (
    <FlatList
      data={DATA}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.row}>
          <Text style={styles.text}>{item.title}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  row: { padding: 16, borderBottomWidth: 1, borderColor: '#eee' },
  text: { fontSize: 16 },
});

渲染结果：1000 行列表滚动丝滑——因为内存里实际只渲染了屏幕上看得见的十几行，滚出去的行被回收了。

跟着做

步骤 1：Flexbox 三剑客解决 80% 布局

RN 默认 flexDirection: 'column'（主轴纵向）。记住三个属性的分工：

• flexDirection：主轴方向（row 横向 / column 纵向）
• justifyContent：主轴上的对齐（flex-start / center / space-between / space-around / space-evenly）
• alignItems：交叉轴上的对齐（flex-start / center / flex-end / stretch）

import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      {/* 1. 水平排列 + 两端对齐：列表项「左文字右箭头」 */}
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12 }}>
        <Text>用户名</Text>
        <Text style={{ color: '#ccc' }}>›</Text>
      </View>

      {/* 2. 左固定右自适应：头像 + 内容 */}
      <View style={{ flexDirection: 'row', marginTop: 16 }}>
        <View style={{ width: 48, height: 48, borderRadius: 24, backgroundColor: '#ddd' }} />
        <View style={{ flex: 1, marginLeft: 12 }}>
          <Text style={{ fontWeight: 'bold' }}>张小明</Text>
          <Text style={{ color: '#888', marginTop: 4 }}>右侧内容用 flex: 1 自动占满剩余宽度</Text>
        </View>
      </View>

      {/* 3. 三栏等分：每个子元素 flex: 1 */}
      <View style={{ flexDirection: 'row', marginTop: 24 }}>
        {['点赞', '评论', '分享'].map((t) => (
          <View key={t} style={{ flex: 1, alignItems: 'center' }}>
            <Text>{t}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}