React Native 跨平台开发：第一个 APP 实战-优快云博客

React Native 跨平台开发：第一个 APP 实战指南

1. 环境准备

安装 Node.js（建议 v16+）
安装 Java JDK（Android 开发）
安装 Android Studio（配置模拟器）
安装 Xcode（iOS 开发，仅 macOS）
全局安装 React Native CLI：
```
npm install -g react-native-cli
```

2. 创建新项目

npx react-native init MyFirstApp
cd MyFirstApp

3. 编写基础组件

修改 App.js 文件：

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>我的第一个 APP</Text>
      <Text style={styles.counter}>计数: {count}</Text>
      <View style={styles.buttonGroup}>
        <Button title="增加" onPress={() => setCount(count + 1)} />
        <Button title="重置" onPress={() => setCount(0)} color="#ff5555" />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f8ff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  counter: {
    fontSize: 18,
    marginBottom: 30,
  },
  buttonGroup: {
    flexDirection: 'row',
    gap: 15,
  },
});

export default App;

4. 运行应用

Android 设备：
```
npx react-native run-android
```
iOS 设备（macOS）：
```
npx react-native run-ios
```

5. 核心功能解析

状态管理：
- useState Hook 管理计数器状态
- 状态变化触发 UI 自动更新
跨平台组件：
- <View> 替代 Web 的 <div>
- <Text> 替代 <p>/<span>
- 样式通过 StyleSheet.create 实现
布局系统：
- Flexbox 布局（默认 flexDirection: 'column'）
- 通过 justifyContent 和 alignItems 控制对齐

6. 调试技巧

摇动设备调出开发者菜单
启用 Hot Reloading 实时预览代码修改
使用 Chrome DevTools 调试 JavaScript：
```
console.log('当前计数:', count);
```

7. 项目结构说明

MyFirstApp/
├── android/      # Android 原生代码
├── ios/          # iOS 原生代码
├── node_modules/
├── src/          # 推荐添加此目录存放组件
├── App.js        # 主入口文件
└── package.json  # 依赖管理