企业官网建设流程全解析

1. 项目概述：一个为React Native应用开发提速的“脚手架”

如果你正在或即将开始一个新的React Native项目，并且厌倦了每次都要从零开始配置开发环境、集成状态管理、设置导航、处理网络请求和配置代码规范，那么你很可能需要一个高质量的“样板工程”。今天要聊的，就是GitHub上一个名为wataru-maeda/react-native-boilerplate的开源项目。它本质上不是一个可以直接上线的应用，而是一个精心设计的、开箱即用的React Native项目起点。

这个样板工程的目标非常明确：为开发者提供一个功能完备、架构清晰、最佳实践集成的React Native项目模板，让你能跳过繁琐的初始化配置，直接进入核心业务逻辑的开发。它就像是一个已经打好地基、砌好承重墙、甚至水电管线都已预埋的“毛坯房”，你只需要根据自己的需求进行“精装修”即可。对于独立开发者、创业团队或者需要快速验证想法的场景来说，这能节省大量前期时间，并确保项目从一开始就建立在相对健壮和可维护的架构之上。

2. 核心架构与技术栈解析

2.1 技术选型背后的考量

wataru-maeda/react-native-boilerplate的技术栈选择并非随意堆砌，每一环都体现了现代React Native开发的主流趋势和工程化考量。

React Native + TypeScript是基石。TypeScript的静态类型检查对于中大型项目至关重要，它能显著减少运行时错误，提升代码的可读性和可维护性。样板工程默认集成了严格的TS配置，确保类型安全从项目第一天就开始。

状态管理：Redux Toolkit (RTK) + Redux Persist。状态管理是复杂应用的核心。Redux Toolkit是官方推荐的、简化Redux逻辑的标准方式，它大幅减少了样板代码（Boilerplate），这也是本项目名称的一个有趣呼应。选择RTK而非更轻量的Context API或MobX，通常意味着项目预期会有较为复杂的状态流转和异步逻辑（如API调用）。Redux Persist的集成则解决了应用状态在App重启后的持久化问题，对于需要保持用户登录状态、应用设置等场景是刚需。

导航：React Navigation。这是React Native社区事实上的标准导航库。样板工程通常会预配置一个包含Stack（堆栈）、Tab（底部标签栏）甚至Drawer（侧边栏）的导航结构示例，开发者可以在此基础上快速修改。

样式方案：Styled-components。在React Native中，除了传统的StyleSheet，使用CSS-in-JS方案如Styled-components正变得越来越流行。它允许你将样式和组件紧密绑定，支持主题（Theme）、动态样式等高级功能，提升了样式的可维护性和复用性。

网络请求：Axios + RTK Query。Axios是广泛使用的HTTP客户端。而RTK Query是Redux Toolkit内置的数据获取和缓存解决方案。它允许你定义“端点”（endpoints），自动处理加载状态、错误状态、缓存、数据失效和重新获取，将异步逻辑的管理提升到了一个新的抽象层级，能极大简化与后端API的交互代码。

代码质量与规范：ESLint + Prettier + Husky。这是现代前端工程的标配。ESLint负责代码质量检查，Prettier负责代码自动格式化，两者结合确保团队代码风格一致。Husky则用于配置Git钩子，例如在提交代码前自动运行ESLint和Prettier，将代码规范检查流程自动化，防止“脏代码”进入仓库。

注意：技术栈的版本是动态变化的。克隆项目后，第一件事应该是检查package.json中的版本号，并运行npm outdated或yarn outdated来查看可用更新。盲目使用一个过时的样板工程，可能会在后期引入依赖冲突或安全漏洞。

2.2 项目目录结构深度解读

一个清晰的目录结构是项目可维护性的基础。我们来剖析一下这个样板工程可能采用的典型结构：

src/ ├── assets/ # 静态资源（图片、字体、本地JSON等） ├── components/ # 可复用的展示型组件（无状态或内部状态） │ ├── common/ # 全局通用组件（Button, Input, Card等） │ └── [feature]/ # 特定功能域下的组件 ├── constants/ # 常量定义（颜色、字体大小、API URL、路由名等） ├── features/ # 功能模块（基于Redux Ducks或Slice模式组织） │ ├── auth/ # 认证模块 │ │ ├── components/ # 该功能专属组件 │ │ ├── hooks/ # 该功能专属自定义Hook │ │ ├── slices/ # Redux Toolkit Slice（状态逻辑） │ │ └── index.ts # 模块出口文件 │ └── user/ # 用户模块 ├── hooks/ # 全局可复用的自定义Hook（如useDebounce, useLocalStorage） ├── navigation/ # 导航配置和路由定义 ├── screens/ # 页面级组件（与导航路由直接对应） ├── services/ # 外部服务抽象层（API客户端、推送、分析等） ├── store/ # Redux Store配置（包含rootReducer, rootSaga如果用了的话） ├── themes/ # 样式主题定义（颜色、间距、字体等） ├── utils/ # 工具函数（格式化、验证、辅助函数等） └── App.tsx # 应用根组件

这种“功能文件夹”（Feature Folder）结构是当前React社区推崇的架构方式。它将与某个特定功能（如用户管理、商品列表）相关的所有代码（组件、状态逻辑、API调用、样式）集中在一起，而不是按照“类型”（components/, reducers/, actions/）来分散。这大大提升了功能的內聚性，在添加、修改或删除某个功能时，所有相关文件都在同一个目录下，操作起来非常直观，也利于团队协作时的职责划分。

3. 环境准备与项目初始化实操

3.1 开发环境搭建要点

在拉取样板代码之前，你需要确保本地环境就绪。对于React Native开发，这通常意味着：

1. Node.js与包管理器：安装LTS版本的Node.js（如18.x, 20.x）。包管理器推荐使用yarn或npm，样板工程的README通常会指明偏好。yarn在依赖安装速度和lockfile确定性上通常表现更好。
2. React Native CLI环境：根据官方文档安装Android Studio（包含SDK和模拟器）和/或Xcode（仅macOS，用于iOS开发）。这是最耗时但也最基础的一步。务必配置好ANDROID_HOME等环境变量。
3. 移动设备或模拟器：准备一台Android手机/模拟器或iOS模拟器/真机。对于快速启动，Android模拟器（如Pixel 5）是个不错的选择。

一个常见的坑是React Native版本与样板工程锁定版本不兼容。样板工程的package.json里锁定了react-native的版本。如果你全局安装了不同版本的React Native CLI，可能会在运行npx react-native run-android时遇到问题。最佳实践是：完全依赖项目本地node_modules中的CLI，使用npx react-native来执行所有命令，避免全局版本冲突。

3.2 克隆与启动的详细步骤

假设你已经准备好了环境，接下来是具体的操作流程：

# 1. 克隆仓库到本地，并重命名为你的项目名 git clone https://github.com/wataru-maeda/react-native-boilerplate.git my-awesome-app cd my-awesome-app # 2. 安装项目依赖 yarn install # 或 npm install # 3. 安装iOS依赖（仅限macOS且需要开发iOS） cd ios && pod install && cd .. # 4. 启动Metro打包器（在一个独立的终端窗口运行） yarn start # 或 npm start # 5. 运行应用到Android模拟器/设备（在另一个终端窗口运行） yarn android # 或 npm run android # 6. 运行应用到iOS模拟器（macOS，在另一个终端窗口运行） yarn ios # 或 npm run ios

关键步骤解析：

• yarn install：这一步会根据package.json和yarn.lock安装所有依赖。如果网络不佳，可能会失败，可以考虑配置国内镜像源。
• pod install：这是iOS开发的关键步骤。ios/目录下的Podfile定义了项目所需的原生模块（如一些需要链接原生代码的第三方库）。pod install会读取这个文件，并安装这些原生依赖到Pods/目录。每次你向package.json添加了新的包含原生代码的React Native库（例如@react-native-community/cameraroll），都需要重新运行cd ios && pod install。
• yarn start：启动Metro Bundler，这是一个JavaScript打包器，负责在开发时实时编译和提供你的JS代码。它会监听文件变化并实现热重载（Hot Reloading）。
• yarn android/yarn ios：这些脚本内部会调用npx react-native run-android和npx react-native run-ios，它们会编译对应的原生代码，并将应用安装到模拟器/设备上，最后通过Metro加载JS Bundle。

实操心得：在第一次运行yarn android时，很可能会因为缺少Android SDK组件或许可证问题而失败。错误信息通常会指引你如何解决，例如运行sdkmanager安装特定版本的构建工具或平台。耐心阅读命令行报错，并搜索错误关键词，大部分问题在Stack Overflow上都有解决方案。对于iOS，确保Xcode命令行工具已安装（xcode-select --install）。

4. 核心功能模块定制化开发

4.1 状态管理与数据流实战

样板工程已经配置好了Redux Toolkit Store。你的工作重心是理解并扩展它。假设我们要添加一个“待办事项（Todo）”功能。

首先，在src/features/目录下创建todo/文件夹。然后创建todoSlice.ts：

// src/features/todo/todoSlice.ts import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'; import { RootState } from '../../store'; // 定义Todo类型 export interface TodoItem { id: string; text: string; completed: boolean; } // 定义该Slice的状态类型 interface TodoState { items: TodoItem[]; loading: boolean; error: string | null; } // 初始状态 const initialState: TodoState = { items: [], loading: false, error: null, }; // 模拟一个异步API调用（例如，从服务器获取Todo列表） export const fetchTodos = createAsyncThunk( 'todos/fetchTodos', async (_, { rejectWithValue }) => { try { // 这里替换为真实的API调用，例如：const response = await axios.get('/api/todos'); const mockData: TodoItem[] = [ { id: '1', text: '学习React Native', completed: true }, { id: '2', text: '定制Boilerplate', completed: false }, ]; // 模拟网络延迟 await new Promise(resolve => setTimeout(resolve, 500)); return mockData; } catch (error: any) { return rejectWithValue(error.message || '获取待办事项失败'); } } ); const todoSlice = createSlice({ name: 'todos', initialState, reducers: { // 同步action：添加一个Todo addTodo: (state, action: PayloadAction<Omit<TodoItem, 'id' | 'completed'>>) => { const newTodo: TodoItem = { id: Date.now().toString(), text: action.payload.text, completed: false, }; state.items.push(newTodo); }, // 同步action：切换Todo完成状态 toggleTodo: (state, action: PayloadAction<string>) => { const todo = state.items.find(item => item.id === action.payload); if (todo) { todo.completed = !todo.completed; } }, }, extraReducers: builder => { // 处理异步thunk的各个阶段 builder .addCase(fetchTodos.pending, state => { state.loading = true; state.error = null; }) .addCase(fetchTodos.fulfilled, (state, action) => { state.loading = false; state.items = action.payload; }) .addCase(fetchTodos.rejected, (state, action) => { state.loading = false; state.error = action.payload as string; }); }, }); // 导出actions供组件dispatch export const { addTodo, toggleTodo } = todoSlice.actions; // 导出selector函数，用于在组件中获取状态片段 export const selectAllTodos = (state: RootState) => state.todo.items; export const selectTodosLoading = (state: RootState) => state.todo.loading; // 导出reducer，用于添加到store export default todoSlice.reducer;

接下来，需要将这个slice的reducer添加到根store中。在src/store/rootReducer.ts（或类似文件）中：

import { combineReducers } from '@reduxjs/toolkit'; import todoReducer from '../features/todo/todoSlice'; // ... 导入其他reducers const rootReducer = combineReducers({ todo: todoReducer, // ... 其他状态切片 }); export default rootReducer;

现在，你可以在组件中使用这个Todo状态了。创建一个展示组件TodoList.tsx：

// src/features/todo/components/TodoList.tsx import React, { useEffect } from 'react'; import { View, Text, FlatList, TouchableOpacity, ActivityIndicator } from 'react-native'; import { useDispatch, useSelector } from 'react-redux'; import { fetchTodos, selectAllTodos, selectTodosLoading, toggleTodo } from '../todoSlice'; import { RootState } from '../../../store'; const TodoList: React.FC = () => { const dispatch = useDispatch(); const todos = useSelector(selectAllTodos); const loading = useSelector(selectTodosLoading); useEffect(() => { dispatch(fetchTodos()); }, [dispatch]); const renderItem = ({ item }: { item: TodoItem }) => ( <TouchableOpacity onPress={() => dispatch(toggleTodo(item.id))}> <View style={{ padding: 15, borderBottomWidth: 1, flexDirection: 'row', alignItems: 'center' }}> <Text style={{ marginRight: 10 }}>{item.completed ? '✅' : '⬜'}</Text> <Text style={{ textDecorationLine: item.completed ? 'line-through' : 'none' }}> {item.text} </Text> </View> </TouchableOpacity> ); if (loading) { return <ActivityIndicator size="large" />; } return ( <FlatList data={todos} renderItem={renderItem} keyExtractor={item => item.id} /> ); }; export default TodoList;

这段代码的精髓：

1. createAsyncThunk：它自动为你生成pending、fulfilled、rejected三种action，你只需要在extraReducers中处理它们，无需手动编写繁琐的REQUEST、SUCCESS、FAILUREaction类型和creator。
2. Selector函数：在slice中定义selector（如selectAllTodos），这是一种最佳实践。它封装了从根状态中选取特定数据的逻辑。如果未来状态结构发生变化，你只需要修改这一个地方，所有使用该selector的组件都会自动更新。
3. TypeScript集成：全程类型安全。PayloadAction定义了action payload的类型，RootState提供了整个store状态的类型定义，useSelector和useDispatch钩子也完全类型化，极大减少了潜在的类型错误。

4.2 导航与路由的配置技巧

样板工程通常已经预设了基本的导航结构。以React Navigation为例，你可能会在src/navigation/下找到AppNavigator.tsx或RootStack.tsx。

假设我们要将上面创建的TodoList屏幕添加到导航中。首先，在src/screens/下创建一个屏幕组件TodoScreen.tsx，它可能只是简单渲染TodoList组件并添加一些标题。

// src/screens/TodoScreen.tsx import React from 'react'; import { SafeAreaView, StyleSheet } from 'react-native'; import TodoList from '../features/todo/components/TodoList'; const TodoScreen: React.FC = () => { return ( <SafeAreaView style={styles.container}> <TodoList /> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, }, }); export default TodoScreen;

然后，在导航器中添加这个屏幕。假设我们使用Stack Navigator：

// src/navigation/AppNavigator.tsx import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import HomeScreen from '../screens/HomeScreen'; import TodoScreen from '../screens/TodoScreen'; // 导入新屏幕 import { RootStackParamList } from './types'; // 类型定义文件 const Stack = createNativeStackNavigator<RootStackParamList>(); const AppNavigator: React.FC = () => { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Todo" component={TodoScreen} options={{ title: '我的待办事项' }} // 配置屏幕选项 /> </Stack.Navigator> </NavigationContainer> ); }; export default AppNavigator;

同时，需要更新导航类型定义，以确保类型安全：

// src/navigation/types.ts export type RootStackParamList = { Home: undefined; // 该路由不需要参数 Todo: undefined; // ... 其他路由 };

导航最佳实践：

• 类型安全：始终定义ParamList类型，并在createNativeStackNavigator和useNavigation、useRoute钩子中使用它。这能让你在导航和传递参数时获得完整的TypeScript智能提示和错误检查。
• 懒加载屏幕：对于大型应用，可以考虑使用React.lazy和Suspense来实现屏幕组件的懒加载，优化初始加载性能。不过，在React Native中，这需要与Metro的动态导入配合，且可能增加一些复杂度，需根据项目规模权衡。
• 深层链接（Deep Linking）：样板工程可能已经配置了基础的深层链接。如果你需要从外部（如浏览器、推送通知）直接打开应用的特定屏幕，需要仔细配置linking选项。

5. 样式、主题与UI组件库集成

5.1 使用Styled-components构建主题化UI

样板工程如果集成了Styled-components，通常会有一个主题（Theme）系统。这允许你定义一套设计令牌（Design Tokens），如颜色、字体、间距等，并在整个应用中一致地使用。

首先，查看或创建主题文件：

// src/themes/index.ts export const lightTheme = { colors: { primary: '#007AFF', background: '#FFFFFF', text: '#000000', border: '#C7C7CC', success: '#34C759', error: '#FF3B30', }, spacing: { xs: 4, s: 8, m: 16, l: 24, xl: 32, }, // ... 其他设计令牌 }; export const darkTheme = { colors: { primary: '#0A84FF', background: '#000000', text: '#FFFFFF', border: '#38383A', success: '#30D158', error: '#FF453A', }, spacing: { ...lightTheme.spacing }, // 复用间距 };

然后，在App.tsx或一个专门的ThemeProvider组件中包裹你的应用：

// App.tsx import React from 'react'; import { ThemeProvider } from 'styled-components/native'; import { lightTheme } from './src/themes'; import AppNavigator from './src/navigation/AppNavigator'; const App: React.FC = () => { return ( <ThemeProvider theme={lightTheme}> <AppNavigator /> </ThemeProvider> ); }; export default App;

现在，你可以在任何Styled-component中使用主题：

// src/components/common/Button.tsx import styled from 'styled-components/native'; import { TouchableOpacity, Text } from 'react-native'; export const StyledButton = styled(TouchableOpacity)` background-color: ${({ theme }) => theme.colors.primary}; padding: ${({ theme }) => theme.spacing.m}px ${({ theme }) => theme.spacing.l}px; border-radius: 8px; align-items: center; `; export const ButtonText = styled(Text)` color: white; font-weight: 600; font-size: 16px; `; const Button = ({ title, onPress }) => { return ( <StyledButton onPress={onPress}> <ButtonText>{title}</ButtonText> </StyledButton> ); };

主题切换的实现思路：要实现亮色/暗色模式切换，你需要将当前主题存储在全局状态（如Redux）或使用Context。然后，根据用户的选择动态切换ThemeProvider的theme属性。同时，确保所有样式都通过theme对象引用，而不是硬编码的颜色值。

5.2 集成第三方UI组件库

虽然Styled-components给了你最大的灵活性，但为了更快地搭建界面，集成一个成熟的UI组件库（如React Native Paper, React Native Elements, NativeBase等）是常见选择。

以集成react-native-paper为例：

yarn add react-native-paper # 根据其文档，可能还需要安装特定的图标库和链接原生依赖（对于Paper，通常不需要额外链接）

然后，你需要用它的Provider包裹你的应用，并且它通常可以和Styled-components的ThemeProvider共存，但需要注意主题对象可能需要适配。

// App.tsx import React from 'react'; import { Provider as PaperProvider } from 'react-native-paper'; import { ThemeProvider as StyledThemeProvider } from 'styled-components/native'; import { lightTheme } from './src/themes'; import AppNavigator from './src/navigation/AppNavigator'; // 可能需要将你的自定义主题适配成Paper的主题格式，或者直接使用Paper的默认主题 import { DefaultTheme as PaperDefaultTheme } from 'react-native-paper'; const App: React.FC = () => { return ( <PaperProvider theme={PaperDefaultTheme}> <StyledThemeProvider theme={lightTheme}> <AppNavigator /> </StyledThemeProvider> </PaperProvider> ); };

选择UI库的考量：

• 设计风格：组件库是否符合你的产品设计语言？
• 可定制性：是否能方便地覆盖默认样式和主题？
• 包大小：引入一个完整的组件库会增加最终的App体积，对于性能敏感的应用需要权衡。
• 维护状态：库是否活跃维护，与当前React Native版本兼容性如何？

实操心得：在项目初期，使用UI组件库可以极大提升开发效率。但到了中后期，当需要高度定制化的设计时，你可能会发现覆盖组件库的默认样式比从头写一个组件更麻烦。一个折中的策略是：将UI组件库作为“乐高积木”的基础件，主要用于快速搭建原型和内部管理后台；对于面向用户的核心界面，则更多使用自定义的Styled-components来实现精准的设计还原。

6. 网络请求、缓存与性能优化

6.1 使用RTK Query管理API状态

这是本样板工程的一大亮点。RTK Query将网络请求逻辑提升到了Store层面进行管理。假设我们有一个获取用户列表的API。

首先，在src/services/或src/api/下创建一个API slice：

// src/services/api.ts import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; import { User } from '../types'; // 假设有User类型定义 export const api = createApi({ reducerPath: 'api', baseQuery: fetchBaseQuery({ baseUrl: 'https://your-api-server.com/api', prepareHeaders: (headers, { getState }) => { // 从store中获取token并添加到请求头 const token = (getState() as RootState).auth.token; if (token) { headers.set('authorization', `Bearer ${token}`); } return headers; }, }), tagTypes: ['User'], // 定义标签类型，用于缓存失效 endpoints: builder => ({ getUsers: builder.query<User[], void>({ query: () => '/users', providesTags: ['User'], // 此查询的结果带有'User'标签 }), getUserById: builder.query<User, string>({ query: id => `/users/${id}`, providesTags: (result, error, id) => [{ type: 'User', id }], // 为单个结果提供标签 }), createUser: builder.mutation<User, Partial<User>>({ query: newUser => ({ url: '/users', method: 'POST', body: newUser, }), invalidatesTags: ['User'], // 此操作会使所有'User'标签的缓存失效，触发重新获取 }), updateUser: builder.mutation<User, { id: string; changes: Partial<User> }>({ query: ({ id, changes }) => ({ url: `/users/${id}`, method: 'PUT', body: changes, }), invalidatesTags: (result, error, { id }) => [{ type: 'User', id }], // 使特定id的缓存失效 }), }), }); export const { useGetUsersQuery, useGetUserByIdQuery, useCreateUserMutation, useUpdateUserMutation } = api;

然后，将这个API的reducer添加到store中：

// src/store/store.ts import { configureStore } from '@reduxjs/toolkit'; import rootReducer from './rootReducer'; import { api } from '../services/api'; export const store = configureStore({ reducer: { ...rootReducer, [api.reducerPath]: api.reducer, // 添加RTK Query reducer }, middleware: getDefaultMiddleware => getDefaultMiddleware().concat(api.middleware), // 添加RTK Query middleware });

现在，在组件中使用变得极其简单：

// src/screens/UsersScreen.tsx import React from 'react'; import { View, FlatList, Text, ActivityIndicator } from 'react-native'; import { useGetUsersQuery } from '../services/api'; const UsersScreen: React.FC = () => { const { data: users, isLoading, isError, error } = useGetUsersQuery(); if (isLoading) { return <ActivityIndicator />; } if (isError) { return <Text>Error: {error.toString()}</Text>; } return ( <FlatList data={users} keyExtractor={item => item.id} renderItem={({ item }) => ( <View style={{ padding: 15 }}> <Text>{item.name}</Text> <Text>{item.email}</Text> </View> )} /> ); };

RTK Query的优势：

• 零配置缓存：自动缓存请求结果，相同的请求在缓存有效期内不会重复发送。
• 自动重取：可以配置轮询、窗口重新聚焦时自动重取数据。
• 乐观更新：支持在请求发送前就更新UI，提供更流畅的用户体验。
• 缓存标签系统：通过providesTags和invalidatesTags精细控制缓存失效逻辑，确保UI数据与服务器同步。

6.2 性能优化与调试

一个基于样板工程的项目，在性能上已经有了不错的基础（如Hermes引擎的启用、合理的打包配置）。但开发者仍需关注以下几点：

1. 列表性能：对于长列表，务必使用FlatList或SectionList，并正确实现keyExtractor。考虑使用getItemLayout属性来跳过动态测量，对于高度固定的行可以提升滚动性能。对于超长列表，windowSize属性可以控制渲染的“窗口”大小。
2. 图片优化：使用resizeMode控制图片缩放，避免加载超大图。对于网络图片，使用缓存库如react-native-fast-image可以显著提升加载性能和体验。
3. 避免内联函数和样式：在渲染函数中创建新的函数或样式对象，会导致子组件不必要的重渲染。尽量使用useCallback和useMemo来缓存函数和值，将样式定义在组件外部或使用StyleSheet.create。
4. 内存泄漏：在组件卸载时，取消未完成的网络请求或订阅。RTK Query会自动管理请求的生命周期，但如果你使用了原生的fetch或axios，需要注意。使用AbortController是一个好方法。
5. Hermes引擎：确保在android/app/build.gradle和iOS项目中启用了Hermes。它是Facebook为React Native优化的JavaScript引擎，能提升启动速度、减少内存占用并缩小应用体积。
6. 调试工具：熟练使用React Native Debugger、Flipper或Chrome DevTools进行调试。特别是Flipper，它可以查看Redux Store状态、网络请求、日志等，是开发利器。

7. 构建、发布与持续集成

7.1 生成发布包（APK/IPA）

样板工程通常已经配置好了基本的构建脚本，但发布到应用商店需要一些额外步骤。

Android (生成APK或AAB)：

1. 生成签名密钥：如果还没有，使用keytool生成一个签名密钥库（keystore）。
2. 配置gradle变量：将签名信息（storeFile, storePassword, keyAlias, keyPassword）安全地配置在android/gradle.properties或通过环境变量注入。切勿将密码提交到版本库！
3. 生成发布包：
   • APK：cd android && ./gradlew assembleRelease
   • AAB (推荐上架Google Play)：cd android && ./gradlew bundleRelease
4. 输出文件位于android/app/build/outputs/相应目录下。

iOS (生成IPA)：

1. 在Xcode中，选择真机设备或“Any iOS Device”作为目标。
2. 选择Product->Archive。
3. Archive完成后，在Xcode Organizer中，选择对应的Archive，点击Distribute App，然后按照向导选择发布方式（App Store Connect、Ad Hoc等）。

重要提示：iOS发布需要Apple开发者账号（每年$99），并且配置证书（Certificates）、标识符（Identifiers）和描述文件（Profiles）的过程较为复杂。建议仔细阅读Apple和React Native官方文档。

7.2 使用Fastlane自动化

手动构建和发布流程繁琐且易错。Fastlane是一个流行的自动化工具，可以帮你自动化构建、测试、截图、发布到应用商店等流程。

样板工程可能已经包含了基本的Fastlane配置。如果没有，可以自行集成。核心是项目根目录下的fastlane/文件夹，其中Fastfile定义了各种“通道”（lane）。

一个简单的Android发布lane示例：

# fastlane/Fastfile default_platform(:android) platform :android do desc "Build and publish a new version to the Google Play Store" lane :release do # 1. 增加版本号（可选，可通过其他方式管理） # increment_version_code(...) # 2. 生成Release Bundle gradle( task: "bundle", build_type: "Release", project_dir: "android/" ) # 3. 上传到Google Play内部测试轨道 upload_to_play_store( track: 'internal', aab: 'android/app/build/outputs/bundle/release/app-release.aab', # 其他元数据参数... ) end end

运行fastlane android release即可自动完成整个流程。对于iOS，也有对应的match（管理证书）、gym（构建）、deliver（上传到App Store Connect）等action。

7.3 持续集成/持续部署 (CI/CD)

将Fastlane集成到CI/CD平台（如GitHub Actions, GitLab CI, Bitrise）中，可以实现代码推送后自动构建和发布测试版本。

一个简单的GitHub Actions工作流示例：

# .github/workflows/android-release.yml name: Android Release Build on: push: tags: - 'v*' # 当推送以v开头的tag时触发 jobs: build-and-release: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '18' - name: Install dependencies run: yarn install - name: Setup Java and Android SDK uses: android-actions/setup-android@v3 - name: Build Release AAB run: | cd android ./gradlew bundleRelease - name: Upload AAB artifact uses: actions/upload-artifact@v3 with: name: app-release path: android/app/build/outputs/bundle/release/app-release.aab

这个工作流会在你推送一个类似v1.2.3的tag时，自动构建Android App Bundle，并将产物作为工作流制品保存，供你后续手动下载或自动发布。

8. 常见问题排查与进阶技巧

8.1 典型问题速查表

8.2 进阶技巧与心得

1. 模块化与代码分割：随着项目增长，考虑将一些不常用的功能模块或第三方大库进行动态导入（import()），以减小主包体积，提升初始加载速度。React Native的Metro打包器支持动态导入。
2. 错误边界与监控：在关键组件层级实现错误边界（Error Boundaries），防止局部UI错误导致整个应用崩溃。集成像Sentry这样的错误监控平台，能帮助你在生产环境中捕获并分析JavaScript和原生层的错误。
3. 自动化测试：样板工程可能已经配置了Jest。务必为你的业务逻辑（Redux slices, utils函数）和关键组件编写单元测试和集成测试。使用@testing-library/react-native进行组件测试。虽然初期耗时，但长期来看是保证代码质量、支持重构的基石。
4. 保持依赖更新：定期使用yarn upgrade-interactive或npm outdated检查依赖更新。特别是React Native本身和关键库的更新，可能包含重要的性能改进、Bug修复和安全补丁。但升级前务必在独立分支测试，因为可能存在破坏性变更。
5. 从样板工程“毕业”：最终，这个样板工程是你的起点，而不是终点。随着你对项目架构和业务的理解加深，你可能会发现某些预设的配置（如某个状态管理库、某个导航模式）不再适合。不要害怕去修改甚至替换它们。理解样板工程的每一行配置，是为了有一天你能脱离它，打造出最适合自己项目的、独一无二的工程体系。