合肥全栈开发者React Native跨平台移动应用开发实战笔记

为什么选择 React Native

作为一名在合肥工作的全栈开发者我经常面临这样的需求：客户既要 Android App 又要 iOS App 还要控制预算和开发周期。如果用原生开发(Android Kotlin/iOS Swift)需要两套团队两份代码成本和时间都翻倍。这时候 React Native 就成了最佳选择——一套代码同时生成 Android 和 iOS 两个平台的 App 性能接近原生开发效率大幅提升。

当然 RN 不是万能的——对于极度追求性能的游戏/AR/VR 应用或者需要大量调用平台特有 API 的场景原生仍然是更好的选择。但对于大多数业务类App(电商/社交/工具/企业管理等)RN 完全够用而且生态成熟稳定。

环境搭建与项目初始化

前置要求：Node.js ≥ 18 / Java JDK 17(Android 需要) / Xcode(iOS 需要 Mac) / Android Studio / Watchman(macOS)。创建项目：

npx @react-native-community/cli@latest init HefeiApp
cd HefeiApp
npx react-native run-android  # 或 run-ios

推荐的项目目录结构：

HefeiApp/
├── src/
│   ├── components/     # 公共组件
│   ├── screens/        # 页面组件
│   ├── navigation/     # 导航配置
│   ├── stores/         # 状态管理
│   ├── services/       # API 服务
│   ├── hooks/          # 自定义 Hooks
│   ├── utils/          # 工具函数
│   ├── constants/      # 常量定义
│   └── types/          # TypeScript 类型
├── android/
├── ios/
├── App.tsx
└── package.json

导航系统搭建

使用 React Navigation v6(目前最流行的 RN 导航库)：

// 安装
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

// navigation/index.tsx
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { HomeScreen } from '../screens/HomeScreen'
import { DetailScreen } from '../screens/DetailScreen'

const Stack = createNativeStackNavigator()

export default function AppNavigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerStyle: { backgroundColor: '#1a73e8' },
          headerTintColor: '#fff'
        }}
      >
        <Stack.Screen 
          name="Home" 
          component={HomeScreen}
          options={{ title: '合肥科技' }}
        />
        <Stack.Screen 
          name="Detail" 
          component={DetailScreen}
          options={({ route }) => ({ title: route.params?.title })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

状态管理——Zustand