首页 › 移动端 › React Native 教程

状态与导航

React Native 教程 · 第 5 章 · 7 次浏览

列表是移动应用的核心场景。RN 用 FlatList 而不是 map + ScrollView：它只渲染可见项（虚拟化），长列表也不卡。

FlatList 属性

  • data：数据数组
  • renderItem：渲染每一项
  • keyExtractor：唯一 key
  • onRefresh / refreshing：下拉刷新
  • onEndReached：滚动到底加载更多
  • ListEmptyComponent：空状态

代码示例

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

const DATA = [
  { id: "1", name: "苹果", price: 5.5 },
  { id: "2", name: "香蕉", price: 3.2 },
  { id: "3", name: "橘子", price: 6.0 }
];

const Item = ({ name, price }) => (
  <View style={styles.item}>
    <Text style={styles.name}>{name}</Text>
    <Text style={styles.price}>￥{price}</Text>
  </View>
);

const App = () => {
  return (
    <FlatList
      data={DATA}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <Item name={item.name} price={item.price} />}
      ListEmptyComponent={<Text>暂无数据</Text>}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: "#eee"
  },
  name: { fontSize: 16 },
  price: { color: "#e53935", fontWeight: "600" }
});

export default App;
📚 JavaScript 语法速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
写法 / 语法作用
let x = 1;声明变量（可重新赋值）
const y = 2;声明常量（不可重新赋值）
var 已过时旧式变量声明，建议用 let/const
if (条件) { } else { }条件判断
for (let i = 0; i < n; i++) { }循环
while (条件) { }条件循环
function fn(a, b) { return a + b; }函数声明
const fn = (a) => a + 1;箭头函数
array.push(x) / pop()数组尾部添加 / 删除
array.map(fn) / filter(fn)数组映射 / 过滤
obj.key / obj["key"]访问对象属性
JSON.stringify(obj)对象转 JSON 字符串
JSON.parse(str)JSON 字符串转对象
document.getElementById("id")按 id 取元素
document.querySelector("选择器")按选择器取第一个元素
element.textContent读写元素文本
element.innerHTML读写元素 HTML（慎用，防 XSS）
element.addEventListener("click", fn)绑定事件
console.log(x)控制台输出（调试）
setTimeout(fn, 1000)延迟执行（毫秒）
window.location.href当前页面地址（可赋值跳转）
localStorage.setItem("k", v)本地存储写入
localStorage.getItem("k")本地存储读取
new Promise((resolve, reject) => {})Promise 异步处理
async / await异步函数语法糖
📖 延伸阅读