# 反应原生设计掌握 React Native 样式模式、React Navigation 和 Reanimated 3，以构建具有本机质量用户体验的高性能、跨平台移动应用程序。 ## 何时使用此技能 * 使用 React Native 构建跨平台移动应用程序 * 使用 React Navigation 6+ 实现导航 * 使用 Reanimated 3 创建高性能动画 * 使用 StyleSheet 和 styled-components 来设置组件样式 * 为不同的屏幕尺寸构建响应式布局 * 实现特定平台的设计（iOS/Android） * 使用手势处理程序创建手势驱动的交互 * 优化React Native性能 ## 核心概念 ### 1\.样式表和样式 **基本样式表：** 从 'react-native' 导入 { StyleSheet, View, Text }; const 样式 = StyleSheet.create({ 容器：{ 弹性：1，填充：16，背景颜色: '#ffffff', }, 标题：{ 字体大小：24，字体粗细：'600'，颜色：'#1a1a1a'，底部边距：8， }, 副标题：{ 字体大小：16，颜色: '#666666', 行高：24， }, }); 函数卡（）{ 返回（ <视图样式={styles.container}> 标题字幕文本）； } **动态样式：** 接口 CardProps { 变体：“主要” | “次要”；禁用？：布尔值； } 功能卡（{变体，禁用}：CardProps）{ 返回（ <视图样式={[ 样式.card, 变体==='主要'？样式.主要：样式.次要，禁用 && 样式.disabled, ]}> <文本样式={styles.text}>内容）； } const 样式 = StyleSheet.create({ 卡：{ 填充：16，边框半径：12， }, 主要：{ 背景颜色: '#6366f1', }, 次要：{ 背景颜色: '#f3f4f6', 边框宽度：1，边框颜色: '#e5e7eb', }, 禁用：{ 不透明度：0.5， }, 文本：{ 字体大小：16， }, }); ### 2\.弹性盒布局 **行和列布局：** const 样式 = StyleSheet.create({ // 垂直栈（列）列：{ flexDirection: "列", 间隙：12， }, // 水平堆栈（行）行：{ flexDirection: "行", 对齐项目：“居中”，差距：8， }, // 项目之间的空间之间的空间：{ flexDirection: "行", justifyContent: "空间之间", 对齐项目：“居中”， }, // 内容居中居中：{ 弹性：1， justifyContent：“中心”，对齐项目：“居中”， }, // 填充剩余空间填充：{ 弹性：1， }, }); ### 3\.反应导航设置 **堆栈导航器：** 从'@react-navigation/native'导入{NavigationContainer}；从 '@react-navigation/native-stack' 导入 { createNativeStackNavigator }；类型 RootStackParamList = { 主页：未定义；详细信息：{ itemId：字符串}；设置：未定义； }; const Stack = createNativeStackNavigator(); 函数 AppNavigator() { 返回（ <导航容器> <堆栈导航器初始路由名称=“家” 屏幕选项={{ headerStyle: { backgroundColor: '#6366f1' }, headerTintColor: '#ffffff', headerTitleStyle: { fontWeight: '600' }, }} > <堆栈.屏幕名称=“家” 组件={主屏幕} 选项={{ 标题: '家' }} /> <堆栈.屏幕名称=“详细信息” 组件={详细信息屏幕} 选项={({ 路线 }) => ({ 标题：`项目 ${route.params.itemId}`, })} /> ）； } **选项卡导航器：** 从 '@react-navigation/bottom-tabs' 导入 { createBottomTabNavigator }；从 '@expo/vector-icons' 导入 { Ionicons }；类型 TabParamList = { 主页：未定义；搜索：未定义；简介：未定义； }; const Tab = createBottomTabNavigator(); 函数 TabNavigator() { 返回（ <标签导航器 screenOptions={({ 路线 }) => ({ tabBarIcon: ({ 聚焦, 颜色, 大小 }) => { const 图标：Record = { 主页：专注？ 'home' : '主页大纲', 搜索：重点？ '搜索' : '搜索大纲', 简介：专注？ 'person' : '人物轮廓', }; 返回 ; }, tabBarActiveTintColor: '#6366f1', tabBarInactiveTintColor: '#9ca3af', })} > ）； } ### 4\.复活 3 基础知识 **动画值：** 导入动画，{ 使用共享值，使用动画样式，随着春天，随着时间的推移，来自“react-native-reanimated”；函数 AnimatedBox() { const 比例 = useSharedValue(1); const 不透明度 = useSharedValue(1); const animatedStyle = useAnimatedStyle(() => ({ 变换：[{比例尺：比例尺.值}]，不透明度：不透明度.值， })); 常量handlePress = () => { scale.value = withSpring(1.2, {}, () => { 比例.值 = withSpring(1); }); }; 返回（ <可按 onPress={handlePress}> ）； } **手势处理程序集成：** 从'react-native-gesture-handler'导入{手势，GestureDetector}；导入动画，{ 使用共享值，使用动画样式，随着春天，来自“react-native-reanimated”；函数 DraggableCard() { const translateX = useSharedValue(0); consttranslateY = useSharedValue(0); const 手势 = Gesture.Pan() .onUpdate((事件) => { 翻译X.值=事件.翻译X; 翻译Y.值=事件.翻译Y; }) .onEnd(() => { translateX.value = withSpring(0); TranslateY.value = withSpring(0); }); const animatedStyle = useAnimatedStyle(() => ({ 变换：[ { 翻译X: 翻译X.值 }, { 翻译Y: 翻译Y.值 }, ], })); 返回（拖我！）； } ### 5\.特定于平台的样式从“react-native”导入{平台，样式表}； const 样式 = StyleSheet.create({ 容器：{ 填充：16， ...平台.选择({ ios：{ 阴影颜色：“#000”，阴影偏移：{宽度：0，高度：2}，阴影不透明度：0.1，阴影半径：4， }, 安卓：{ 海拔：4， }, }), }, 文本：{ fontFamily：Platform.OS ===“ios”？ “SF Pro Text”：“Roboto”，字体大小：16， }, }); // 特定于平台的组件从“react-native”导入{平台}； const StatusBarHeight = Platform.OS === "ios" ? 44：0； ## 快速启动组件从“反应”导入反应；导入{ 查看，文字，样式表，可按压，图像，来自 'react-native'；导入动画，{ 使用共享值，使用动画样式，随着春天，来自“react-native-reanimated”；接口 ItemCardProps { 标题：字符串；副标题：字符串；图片网址：字符串； onPress: () => void; } const AnimatedPressable = Animated.createAnimatedComponent(Pressable); 导出函数 ItemCard({ 标题, 副标题, imageUrl, onPress }: ItemCardProps) { const 比例 = useSharedValue(1); const animatedStyle = useAnimatedStyle(() => ({ 变换：[{比例尺：比例尺.值}]， })); 返回（ <动画可按样式={[styles.card,animatedStyle]} onPress={onPress} onPressIn={() => {scale.value = withSpring(0.97); }} onPressOut={() => {scale.value = withSpring(1); }} > <图片源={{ uri: imageUrl }} style={styles.image} /> <查看样式={styles.content}> <文本样式={styles.title} numberOfLines={1}> {标题} <文本样式={styles.subtitle} numberOfLines={2}> {副标题} ）； } const 样式 = StyleSheet.create({ 卡：{ 背景颜色: '#ffffff', 边框半径：16，溢出：“隐藏”，阴影颜色: '#000', 阴影偏移：{宽度：0，高度：2}，阴影不透明度：0.1，阴影半径：8，海拔：4， }, 图片：{ 宽度：'100%'，身高：160，背景颜色: '#f3f4f6', }, 内容：{ 填充：16，间隙：4， }, 标题：{ 字体大小：18，字体粗细：'600'，颜色：'#1f2937'， }, 副标题：{ 字体大小：14，颜色: '#6b7280', 行高：20， }, }); ## 最佳实践 1. **使用 TypeScript** ：定义导航和 prop 类型以确保类型安全 2. **Memoize Components** ：使用 `React.memo` 和 `useCallback` 来防止不必要的重新渲染 3. **在 UI 线程上运行动画**：使用 Reanimated Worklet 实现 60fps 动画 4. **避免内联样式**：使用 StyleSheet.create 来提高性能 5. **处理安全区域**：使用 `SafeAreaView` 或 `useSafeAreaInsets` 6. **在真实设备上测试**：模拟器/仿真器性能与真实设备不同 7. **对列表使用 FlatList** ：对于长列表，切勿将 ScrollView 与地图一起使用 8. **平台特定代码**：使用 Platform.select 来区分 iOS/Android 差异 ## 常见问题 * **手势冲突** ：使用 `GestureDetector` 包裹手势并使用 `simultaneousHandlers` * **导航类型错误** ：为所有导航器定义 `ParamList` 类型 * **动画卡顿** ：使用“runOnUI”工作集将动画移动到 UI 线程 * **内存泄漏** ：取消 useEffect 中的动画和清理 * **字体加载** ：使用 `expo-font` 或 `react-native-asset` 来自定义字体 * **安全区域问题**：在有缺口的设备上进行测试（iPhone、带有缺口的 Android）

反应原生设计

包含技能