React Native 条目式速查字典。教程见《React Native 环境搭建》系列。

1. 核心组件对照

描述

一切文字必须在 Text 内；Image 网络图必须定尺寸。

2. Flexbox 默认差异

描述

RN 默认 flexDirection:’column’；轴向语义与 CSS 一致；尺寸无单位。

语法和示例

const s = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center',
         justifyContent: 'space-between', gap: 8 },   // gap 可用
  box: { padding: 16, backgroundColor: '#fff' },     // 数字=dp/pt
});

3. useState 函数式更新

描述

依赖旧值必须传函数——连点累加不丢更新。

语法和示例

setCount(c => c + 1);            // 正确
// setCount(count + 1) 在批处理下会丢更新

4. useEffect 竞态处理

描述

取消标志或 AbortController；清理函数卸载时跑。

语法和示例

useEffect(() => {
  let dead = false;
  fetch(url).then(r => r.json())
    .then(d => { if (!dead) setData(d); });
  return () => { dead = true; };
}, [url]);

5. FlatList 性能 props

描述

keyExtractor 稳定 key；定高行配 getItemLayout；windowSize 换内存。

语法和示例

<FlatList
  data={rows}
  keyExtractor={(r) => r.id}
  getItemLayout={(_, i) => ({ length: ROW_H, offset: ROW_H * i, index: i })}
  initialNumToRender={12}
  onEndReached={loadMore}
  onEndReachedThreshold={0.4}
  windowSize={9}
/>

6. Dev Menu 与调试

描述

Android 模拟器 Ctrl+M；iOS Cmd+D；真机摇一摇。

• Perf Monitor 看帧率；React DevTools 看组件树
• Hermes 下生产也要清 console.log
• 新架构（TurboModule）下 setNativeProps 类老 API 已不可用

7. 导航传参与返回

描述

navigate 带参数；route.params 取；BackHandler 处理 Android 返回。

语法和示例

navigation.navigate('Detail', { id: 42 });
const { id } = route.params;
// 返回带结果：previousBackStackEntry 之类模式（React Navigation 6+）

8. 平台分叉

描述

Platform.select 按平台取值；文件级 .android.tsx/.ios.tsx。

语法和示例

import { Platform } from 'react-native';
const pad = Platform.select({ ios: 10, android: 8 });
// Button.android.tsx / Button.ios.tsx 自动按平台加载

9. 安全区与尺寸

描述

safe-area-context 包 SafeAreaView；useWindowDimensions 响应旋转。

语法和示例

import { useWindowDimensions } from 'react-native';
const { width, height } = useWindowDimensions();  // 旋转自动更新
// <SafeAreaView> from react-native-safe-area-context

10. 构建发布

描述

EAS 云构建（Windows 也能出 iOS）；OTA 只更新 JS 层。