React Native开发从入门到精通

移动开发 2025-04-11 23:47
0 阅读

目录

第一部分：React Native 入门

  1. React Native 简介
    • 什么是 React Native
    • React Native 与原生开发对比
    • React Native 的优缺点
  2. 开发环境搭建
    • Node.js 和 npm 的安装
    • React Native CLI 和 Expo 的安装与使用
    • Android Studio 和 Xcode 配置
    • 模拟器和真机调试环境搭建
  3. 第一个 React Native 应用
    • 创建项目
    • 项目结构解析
    • 简单的页面编写和运行

第二部分：React Native 基础

  1. 核心组件
    • Text、View、Image、Button 等组件的使用
    • ScrollView 和 FlatList 组件
    • SectionList 和 VirtualizedList
  2. 样式与布局
    • Flexbox 布局
    • 样式表的使用（StyleSheet）
    • 尺寸与适配
  3. 导航
    • React Navigation 的安装与使用
    • Stack Navigator、Tab Navigator 和 Drawer Navigator
    • 参数传递与深度链接

第三部分：React Native 核心功能

  1. 状态管理
    • useState 和 useReducer 的使用
    • Redux 和 Redux Toolkit 集成
    • MobX 和 Zustand 状态管理
  2. 数据通信
    • Fetch 和 Axios 请求数据
    • 数据缓存（AsyncStorage 和 MMKV）
    • 数据库（SQLite 和 Realm）
  3. 设备功能
    • 使用 Camera 和 Media API
    • Geolocation 与地图集成
    • 推送通知（Firebase、OneSignal）

第四部分：React Native 进阶开发

  1. 自定义组件
    • 创建高复用组件
    • 使用 PropTypes 和 TypeScript 检测类型
  2. 动画
    • Animated API 的使用
    • React Native Reanimated
    • 手势与交互（React Native Gesture Handler）
  3. 性能优化
    • 避免性能陷阱（渲染优化、PureComponent）
    • 使用 Hermes 引擎
    • 图片和资源的优化
  4. 原生模块
    • 自定义原生模块
    • 原生模块与 React Native 交互
    • 使用 Native Modules 和 Native UI Components

第五部分：React Native 案例实战

  1. 小型案例
    • ToDo 应用
    • 计时器
  2. 中型案例
    • 电商应用（商品列表、购物车）
    • 新闻类应用（API 数据加载与显示）
  3. 大型项目
    • 即时聊天应用
    • 视频播放和上传应用

第六部分：未来趋势与学习建议

  1. 最新功能和趋势
    • Fabric 新架构
    • Turbo Modules
    • React Native 和 Flutter 的对比
  2. 学习资源
    • 官方文档
    • 社区论坛
    • 开源项目和实战案例

附录

React Native 的适配难点、疑点、兼容性问题及解决方案

  1. 跨平台样式差异

  2. 设备尺寸和屏幕适配

  3. 导航的兼容性问题

  4. 性能问题

  5. 原生模块的兼容性

  6. 网络请求和缓存问题

  7. Debug 与错误处理

第一部分：React Native 入门

学习目标

  1. 了解 React Native 的基本概念

    • 理解 React Native 的核心思想及其与原生开发的区别。

    • 掌握 React Native 的优缺点，明确其适用场景。

  2. 开发环境搭建

    • 能够独立完成 React Native 开发环境的搭建。

    • 熟悉常用工具（如 Node.js、npm、React Native CLI、Expo）的安装与配置。

  3. 创建并运行第一个 React Native 应用

    • 掌握 React Native 项目的创建流程。

    • 理解项目结构，能够编写并运行简单的页面。

1. React Native 简介

1.1 什么是 React Native

  • 定义：
    React Native 是 Facebook 于 2015 年开源的跨平台移动应用开发框架。它基于 React（一个用于构建用户界面的 JavaScript 库）和 JavaScript，允许开发者使用相同的代码库构建 iOS 和 Android 应用。

  • 核心思想：

    • Learn Once, Write Anywhere：学习一次，编写多平台应用。

    • 声明式 UI：通过组件化的方式构建用户界面。

    • 原生渲染：使用原生组件而非 WebView，提供接近原生的性能。

  • 工作原理：
    React Native 通过 JavaScript 与原生平台通信，将 JavaScript 代码转换为原生组件。例如，React Native 的 <View> 组件在 iOS 上会被转换为 UIView，在 Android 上会被转换为 android.view.View。

1.2 React Native 与原生开发对比

  • 原生开发：

    • iOS：使用 Swift/Objective-C 和 Xcode。

    • Android：使用 Kotlin/Java 和 Android Studio。

    • 优点：

      • 性能最优，功能支持最全面。

      • 直接访问平台特性（如相机、传感器）。

    • 缺点：

      • 需要维护两套代码，开发成本高。

      • 开发周期长，学习曲线陡峭。

  • React Native：

    • 优点：

      • 跨平台开发，节省时间和成本。

      • 基于 JavaScript，学习曲线较低。

      • 热更新支持，无需重新发布应用。

    • 缺点：

      • 性能略低于原生，尤其在复杂动画和计算密集型任务中。

      • 部分原生功能需要依赖第三方库或自定义原生模块。

1.3 React Native 的优缺点

  • 优点：

    1. 跨平台开发：

      • 使用相同的代码库开发 iOS 和 Android 应用，减少开发成本。

    2. 开发效率高：

      • 基于 JavaScript，前端开发者可以快速上手。

      • 支持热更新，实时预览代码修改。

    3. 社区活跃：

      • 拥有庞大的开发者社区和丰富的第三方库支持。

    4. 接近原生的性能：

      • 使用原生组件渲染，性能优于基于 WebView 的框架（如 Cordova）。

  • 缺点：

    1. 性能略低于原生：

      • 在复杂动画或计算密集型任务中，性能可能不如原生开发。

    2. 依赖第三方库：

      • 部分原生功能（如推送通知、地图）需要依赖第三方库。

    3. 调试复杂：

      • 跨平台调试可能比原生开发更复杂。

2. 开发环境搭建

2.1 Node.js 和 npm 的安装

  • Node.js：
    React Native 的运行环境依赖 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，允许在服务器端运行 JavaScript 代码。

    • 安装步骤：

      1. 访问 Node.js 官网。

      2. 下载并安装最新 LTS 版本（推荐使用 nvm 管理多版本）。

      3. 安装完成后，通过以下命令验证安装：

        node -v  # 查看 Node.js 版本
npm -v   # 查看 npm 版本

    • nvm（Node Version Manager）：
      用于管理多个 Node.js 版本，适合需要切换版本的开发者。

      • 安装命令（macOS/Linux）：

        curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

      • 常用命令：

        nvm install 18  # 安装 Node.js 18.x
nvm use 18      # 使用 Node.js 18.x

  • npm：
    npm 是 Node.js 的包管理工具，用于安装和管理 JavaScript 库。

    • 常用命令：

      npm install -g <package>  # 全局安装包
npm install <package>     # 本地安装包
npm update <package>      # 更新包
npm uninstall <package>   # 卸载包

2.2 React Native CLI 和 Expo 的安装与使用

  • React Native CLI：
    React Native 官方提供的命令行工具，适合需要深度定制原生代码的项目。

    • 安装命令：

      npm install -g react-native-cli

    • 创建项目：

      npx react-native init MyFirstApp

    • 运行项目：

      npx react-native run-android  # 运行 Android 项目
npx react-native run-ios      # 运行 iOS 项目

  • Expo：
    Expo 是一个基于 React Native 的开发平台，提供了一套工具和服务，简化了开发流程。

    • 安装命令：

      npm install -g expo-cli

    • 创建项目：

      expo init MyFirstApp

    • 运行项目：

      expo start

    • 优点：

      • 无需配置原生环境，适合快速原型开发。

      • 提供丰富的 API 和组件（如相机、地图）。

2.3 Android Studio 和 Xcode 配置

  • Android Studio：
    Android 开发的官方 IDE，用于配置 Android 开发环境。

    • 安装步骤：

      1. 访问 Android Studio 官网。

      2. 下载并安装 Android Studio。

      3. 安装 Android SDK 和模拟器：

        • 打开 Android Studio，选择 "SDK Manager"。

        • 安装最新版本的 Android SDK 和 Build Tools。

        • 配置环境变量（如 ANDROID_HOME）。

    • 创建模拟器：

      1. 打开 Android Studio，选择 "AVD Manager"。

      2. 创建一个新的虚拟设备（如 Pixel 5）。

      3. 启动模拟器。

  • Xcode：
    iOS 开发的官方 IDE，用于配置 iOS 开发环境。

    • 安装步骤：

      1. 访问 Mac App Store。

      2. 下载并安装 Xcode。

      3. 打开 Xcode，同意许可协议并安装额外组件。

    • 创建模拟器：

      1. 打开 Xcode，选择 "Window" -> "Devices and Simulators"。

      2. 创建一个新的模拟器（如 iPhone 14）。

      3. 启动模拟器。

2.4 模拟器和真机调试环境搭建

  • 模拟器：

    • Android：使用 Android Studio 的 AVD Manager 创建模拟器。

    • iOS：使用 Xcode 的 Simulator。

  • 真机调试：

    • Android：

      1. 通过 USB 连接设备。

      2. 启用开发者模式（连续点击 "设置" -> "关于手机" -> "版本号"）。

      3. 启用 USB 调试（"设置" -> "开发者选项" -> "USB 调试"）。

    • iOS：

      1. 通过 USB 连接设备。

      2. 使用 Xcode 配置设备并安装开发证书。

3. 第一个 React Native 应用

3.1 创建项目

在完成开发环境搭建后，接下来就是创建并运行第一个 React Native 应用。React Native 提供了两种创建项目的方式：React Native CLI 和 Expo。以下是详细步骤：

3.1.1 使用 React Native CLI 创建项目

React Native CLI 是官方提供的命令行工具，适合需要深度定制原生代码的项目。

  • 安装 React Native CLI（如果尚未安装）：

    npm install -g react-native-cli

  • 创建项目：
    使用以下命令创建一个新的 React Native 项目：

    npx react-native init MyFirstApp

    • MyFirstApp 是项目名称，可以根据需要修改。

    • 创建完成后，进入项目目录：

      cd MyFirstApp

  • 项目结构：
    创建完成后，项目目录结构如下：

    MyFirstApp/
├── android/          # Android 原生代码
├── ios/              # iOS 原生代码
├── node_modules/     # 项目依赖的第三方库
├── src/              # 源代码目录（可选）
├── App.js            # 应用的入口文件
├── package.json      # 项目的依赖和脚本配置
└── ...               # 其他配置文件

3.1.2 使用 Expo 创建项目

Expo 是一个基于 React Native 的开发平台，适合快速原型开发。

  • 安装 Expo CLI（如果尚未安装）：

    npm install -g expo-cli

  • 创建项目：
    使用以下命令创建一个新的 Expo 项目：

    expo init MyFirstApp

    • 选择模板（推荐选择 "blank" 空白模板）。

    • 创建完成后，进入项目目录：

      cd MyFirstApp

  • 项目结构：
    创建完成后，项目目录结构如下：

    MyFirstApp/
├── assets/           # 静态资源（如图片、字体）
├── node_modules/     # 项目依赖的第三方库
├── src/              # 源代码目录（可选）
├── App.js            # 应用的入口文件
├── package.json      # 项目的依赖和脚本配置
└── ...               # 其他配置文件

3.2 项目结构解析

无论是使用 React Native CLI 还是 Expo 创建的项目，其核心结构是相似的。以下是关键文件和目录的详细说明：

3.2.1 核心文件

  1. App.js：

    • 应用的入口文件，默认包含一个简单的 React 组件。

    • 开发者可以在此文件中编写应用的 UI 和逻辑。

  2. package.json：

    • 项目的配置文件，包含项目的依赖和脚本命令。

    • 例如：

      {
  "name": "MyFirstApp",
  "version": "1.0.0",
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.71.0"
  }
}

  3. node_modules/：

    • 存放项目依赖的第三方库。

    • 通过 npm install 或 yarn install 安装依赖时生成。

3.2.2 原生代码目录

  1. android/：

    • 包含 Android 原生代码和配置文件。

    • 例如：build.gradle、AndroidManifest.xml。

  2. ios/：

    • 包含 iOS 原生代码和配置文件。

    • 例如：AppDelegate.m、Info.plist。

3.2.3 其他目录

  1. src/：

    • 可选的源代码目录，用于存放组件、页面和工具函数。

    • 例如：

      src/
├── components/    # 可复用组件
├── screens/       # 页面组件
└── utils/         # 工具函数

  2. assets/：

    • 存放静态资源（如图片、字体）。

    • 在 Expo 项目中默认存在，React Native CLI 项目可手动创建。

3.3 简单的页面编写和运行

在创建项目并了解项目结构后，接下来编写一个简单的页面并运行应用。

3.3.1 修改 App.js

打开 App.js，编写一个简单的页面：

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

const App = () => {
  const handlePress = () => {
    alert('Hello, React Native!');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to React Native!</Text>
      <Button title="Click Me" onPress={handlePress} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
  },
});

export default App;

3.3.2 运行项目

  • React Native CLI：

    1. 启动 Metro Bundler（JavaScript 打包工具）：

      npx react-native start

    2. 运行 Android 项目：

      npx react-native run-android

    3. 运行 iOS 项目：

      npx react-native run-ios

  • Expo：

    1. 启动开发服务器：

      expo start

    2. 使用 Expo Go 应用扫描二维码，在真机或模拟器上运行项目。

3.3.3 运行效果

  • 页面显示一个居中文本 "Welcome to React Native!" 和一个按钮。

  • 点击按钮后，弹出提示框 "Hello, React Native!"。

4. 实践环节

  1. 创建项目：

    • 使用 React Native CLI 或 Expo 创建一个新项目。

  2. 修改页面：

    • 修改 App.js，添加一个图片组件、文本及按钮并设置样式。

  3. 运行项目：

    • 在模拟器或真机上运行项目，查看效果。

4.1 创建项目

在实践环节中，学员将通过实际操作创建一个 React Native 项目，并运行在模拟器或真机上。以下是详细步骤：

4.1.1 使用 React Native CLI 创建项目

  1. 安装 React Native CLI（如果尚未安装）：

    npm install -g react-native-cli

  2. 创建项目：
    使用以下命令创建一个新的 React Native 项目：

    npx react-native init MyFirstApp

    • MyFirstApp 是项目名称，可以根据需要修改。

    • 创建完成后，进入项目目录：

      cd MyFirstApp

  3. 项目结构：
    创建完成后，项目目录结构如下：

    MyFirstApp/
├── android/          # Android 原生代码
├── ios/              # iOS 原生代码
├── node_modules/     # 项目依赖的第三方库
├── App.js            # 应用的入口文件
├── package.json      # 项目的依赖和脚本配置
└── ...               # 其他配置文件

4.1.2 使用 Expo 创建项目

  1. 安装 Expo CLI（如果尚未安装）：

    npm install -g expo-cli

  2. 创建项目：
    使用以下命令创建一个新的 Expo 项目：

    expo init MyFirstApp

    • 选择模板（推荐选择 "blank" 空白模板）。

    • 创建完成后，进入项目目录：

      cd MyFirstApp

  3. 项目结构：
    创建完成后，项目目录结构如下：

    MyFirstApp/
├── assets/           # 静态资源（如图片、字体）
├── node_modules/     # 项目依赖的第三方库
├── App.js            # 应用的入口文件
├── package.json      # 项目的依赖和脚本配置
└── ...               # 其他配置文件

4.2 修改页面

在创建项目后，学员需要修改 App.js，添加一个图片组件、文本及按钮，并设置样式。

4.2.1 修改 App.js

打开 App.js，编写以下代码：

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

const App = () => {
  const handlePress = () => {
    Alert.alert('Button Pressed', 'You clicked the button!');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to MyFirstApp!</Text>
      <Image
        source={require('./assets/logo.png')} // 替换为你的图片路径
        style={styles.image}
      />
      <Text style={styles.subtitle}>This is a simple React Native app.</Text>
      <Button title="Click Me" onPress={handlePress} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 20,
  },
  image: {
    width: 150,
    height: 150,
    marginBottom: 20,
    borderRadius: 75, // 圆形图片
  },
});

export default App;

4.2.2 添加图片资源

  1. 在项目根目录下创建 assets/ 文件夹（如果不存在）。

  2. 将图片文件（如 logo.png）放入 assets/ 文件夹中。

  3. 在代码中通过 require('./assets/logo.png') 引用图片。

4.3 运行项目

在完成页面修改后，学员需要在模拟器或真机上运行项目，查看效果。

4.3.1 使用 React Native CLI 运行项目

  1. 启动 Metro Bundler：
    在项目根目录下运行以下命令：

    npx react-native start

  2. 运行 Android 项目：
    打开一个新的终端窗口，运行以下命令：

    npx react-native run-android

  3. 运行 iOS 项目：
    打开一个新的终端窗口，运行以下命令：

    npx react-native run-ios

4.3.2 使用 Expo 运行项目

  1. 启动开发服务器：
    在项目根目录下运行以下命令：

    expo start

  2. 运行项目：

    • 在浏览器中打开 Expo Dev Tools。

    • 使用 Expo Go 应用扫描二维码，在真机或模拟器上运行项目。

4.3.3 运行效果

  • 页面显示一个居中标题 "Welcome to MyFirstApp!"。

  • 显示一张圆形图片。

  • 显示一段副标题 "This is a simple React Native app."。

  • 显示一个按钮，点击后弹出提示框 "You clicked the button!"。

评估标准

  • 能够独立创建 React Native 项目。

  • 理解项目结构，并能对默认页面进行简单修改。

  • 能够运行项目并查看效果。

通过以上内容的学习，读者可以掌握 React Native 的基本概念和开发环境搭建，为后续学习打下坚实基础。

第二部分：React Native 基础

学习目标

  • 掌握 React Native 的核心组件和布局方式。

  • 能够实现基本的页面导航和参数传递。

内容

  1. 核心组件

    • Text、View、Image、Button 等组件的使用

    • ScrollView 和 FlatList 组件

    • SectionList 和 VirtualizedList

  2. 样式与布局

    • Flexbox 布局

    • 样式表的使用（StyleSheet）

    • 尺寸与适配

  3. 导航

    • React Navigation 的安装与使用

    • Stack Navigator、Tab Navigator 和 Drawer Navigator

    • 参数传递与深度链接

实践环节

  • 创建一个包含多个页面的应用，使用导航实现页面跳转。

  • 使用 Flexbox 布局实现一个简单的用户信息展示页面。

学习目标

  1. 掌握 React Native 的核心组件和布局方式：

    • 理解并熟练使用常用组件（如 Text、View、Image、Button）。

    • 掌握列表组件（如 ScrollView、FlatList、SectionList）的使用场景和区别。

  2. 能够实现基本的页面导航和参数传递：

    • 使用 React Navigation 实现页面跳转和参数传递。

  3. 能够实现基本的页面导航和参数传递：

    • 使用 Stack Navigator、Tab Navigator 和 Drawer Navigator 实现页面跳转。

    • 掌握参数传递和深度链接的使用。

1. 核心组件

1.1 Text、View、Image、Button 等组件的使用

React Native 提供了一系列核心组件，用于构建用户界面。以下是常用组件的详细说明：

1.1.1 Text 组件

  • 功能：用于显示文本内容。

  • 常用属性：

    • style：设置文本样式（如字体大小、颜色）。

    • numberOfLines：限制文本行数。

    • onPress：点击事件回调。

  • 示例：

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

const App = () => {
  return (
    <Text style={styles.text}>
      Hello, React Native!
    </Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'blue',
  },
});

export default App;

1.1.2 View 组件

  • 功能：用于布局的容器组件，类似于 HTML 中的 div。

  • 常用属性：

    • style：设置布局样式（如宽度、高度、背景颜色）。

    • onLayout：获取布局尺寸的回调。

  • 示例：

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Inside a View</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  text: {
    fontSize: 18,
  },
});

export default App;

1.1.3 Image 组件

  • 功能：用于显示图片。

  • 常用属性：

    • source：图片资源（本地或远程）。

    • style：设置图片样式（如宽度、高度、圆角）。

    • resizeMode：图片缩放模式（如 cover、contain）。

  • 示例：

    import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Image
        source={require('./assets/logo.png')}
        style={styles.image}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
    borderRadius: 100,
  },
});

export default App;

1.1.4 Button 组件

  • 功能：用于触发操作的按钮。

  • 常用属性：

    • title：按钮显示的文本。

    • onPress：点击事件回调。

    • color：按钮背景颜色。

  • 示例：

    import React from 'react';
import { View, Button, Alert } from 'react-native';

const App = () => {
  return (
    <View style={
    
     
     { flex: 1, justifyContent: 'center', padding: 20 }}>
      <Button
        title="Click Me"
        onPress={() => Alert.alert('Button Pressed')}
      />
    </View>
  );
};

export default App;

1.2 ScrollView 和 FlatList 组件

  • ScrollView：

    • 用于显示可滚动的内容区域。

    • 适合内容较少的情况，因为会一次性渲染所有子组件。

  • FlatList：

    • 用于显示长列表，支持懒加载和性能优化。

    • 适合内容较多的情况，只渲染可见区域的内容。

  • 示例：

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

const data = [
  { id: '1', text: 'Item 1' },
  { id: '2', text: 'Item 2' },
  { id: '3', text: 'Item 3' },
];

const App = () => {
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.text}>{item.text}</Text>
        </View>
      )}
      keyExtractor={(item) => item.id}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  text: {
    fontSize: 18,
  },
});

export default App;

1.3 SectionList 和 VirtualizedList

  • SectionList：

    • 用于显示分组的列表数据。

    • 适合需要分组显示的场景（如通讯录）。

  • VirtualizedList：

    • 是 FlatList 和 SectionList 的底层实现。

    • 提供更灵活的列表渲染控制。

2. 样式与布局

2.1 Flexbox 布局

  • Flexbox 是 React Native 中用于布局的核心技术，类似于 CSS 中的 Flexbox。

  • 常用属性：

    • flex：定义组件的伸缩比例。

    • flexDirection：定义主轴方向（row 或 column）。

    • justifyContent：定义主轴对齐方式（如 center、space-between）。

    • alignItems：定义交叉轴对齐方式（如 center、flex-start）。

  • 示例：

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box3} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
  },
  box1: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
  box2: {
    width: 50,
    height: 50,
    backgroundColor: 'green',
  },
  box3: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

export default App;

2.2 样式表的使用（StyleSheet）

  • StyleSheet 用于定义组件的样式，类似于 CSS。

  • 优点：

    • 提高代码可读性。

    • 支持类型检查和性能优化。

  • 示例：

    •  
 
 



                    
                    

                    
                    

                        
 猜你喜欢

                        

                            

                                
                                
                            

                        

                    

                

            


            
            

                
                

                    
 目录

                    

                        
                    

                


                
                

                    
 热门文章