react-native

React Native

核心组件

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

function ProductList({ products }: { products: Product[] }) {
  return (
    <FlatList
      data={products}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <Pressable onPress={() => navigate('Detail', { id: item.id })} style={styles.card}>
          <Text style={styles.title}>{item.name}</Text>
          <Text style={styles.price}>${item.price}</Text>
        </Pressable>
      )}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#fff' },
  title: { fontSize: 16, fontWeight: '600' },
  price: { fontSize: 14, color: '#666', marginTop: 4 },
  separator: { height: 1, backgroundColor: '#eee' },
});

导航（React Navigation）

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

type RootStackParamList = {
  Home: undefined;
  Detail: { id: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Type-safe navigation
import { NativeStackScreenProps } from '@react-navigation/native-stack';
type DetailProps = NativeStackScreenProps<RootStackParamList, 'Detail'>;

function DetailScreen({ route, navigation }: DetailProps) {
  const { id } = route.params;
  return <Text>{id}</Text>;
}

平台特定代码

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1 },
    android: { elevation: 3 },
  }),
});

// File-based: Component.ios.tsx / Component.android.tsx (auto-resolved)

网络

import { useQuery, useMutation } from '@tanstack/react-query';

function useProducts() {
  return useQuery({
    queryKey: ['products'],
    queryFn: async () => {
      const res = await fetch(`${API_URL}/products`);
      if (!res.ok) throw new Error('Failed to fetch');
      return res.json() as Promise<Product[]>;
    },
  });
}

安全存储

import EncryptedStorage from 'react-native-encrypted-storage';

await EncryptedStorage.setItem('auth_token', token);
const token = await EncryptedStorage.getItem('auth_token');
await EncryptedStorage.removeItem('auth_token');

性能

技术	影响
列表使用 FlatList 而非 ScrollView	高
在列表项上使用 React.memo	中
在列表中使用 useCallback 处理事件	中
Hermes 引擎（RN 0.70+ 中默认启用）	高
避免在渲染时使用内联样式	低至中
InteractionManager.runAfterInteractions	中

反模式

反模式	修复方法
长列表使用 ScrollView	使用 FlatList 或 FlashList
FlatList 的 renderItem 中使用内联函数	提取组件并使用 React.memo
将令牌存储在 AsyncStorage 中	使用 react-native-encrypted-storage
没有错误边界	在屏幕外层添加错误边界
忽略表单中的键盘	使用 KeyboardAvoidingView

生产环境检查清单

• 启用 Hermes 引擎
• 为 Android 发布构建配置 ProGuard/R8
• 配置应用签名（Android 密钥库、iOS 证书）
• 配置深度链接
• 错误跟踪（Sentry、Bugsnag）
• OTA 更新（CodePush 或 Expo Updates）
• 性能监控（Flipper、React DevTools）