02-20 18:20 广州软件学院前端工程师发布于广东

关注

Part5.泛端开发趣闻：React Native App 开发要点(3/5)

React Native 开发环境搭建指南

React Native 是一个用于构建跨平台移动应用的框架，允许开发者使用 JavaScript 和 React 来创建 iOS 和 Android 应用。以下是 React Native 开发环境的搭建步骤：

1. 安装 Node.js 和 npm

React Native 需要 Node.js 和 npm（Node 包管理器）。你可以通过以下步骤安装它们：

1.1 下载并安装 Node.js

访问 Node.js 官网下载适合你操作系统的安装包。
安装过程中，npm 会自动安装。

1.2 验证安装

安装完成后，打开终端（命令行）并运行以下命令，验证 Node.js 和 npm 是否安装成功：

node -v
npm -v

如果显示版本号，说明安装成功。

2. 安装 React Native CLI

React Native 提供了一个命令行工具（CLI），用于创建和管理项目。你可以通过 npm 安装它：

npm install -g react-native-cli

3. 安装 Android 开发环境（适用于 Android 开发）

3.1 安装 Java Development Kit (JDK)

访问 Oracle JDK 官网或 OpenJDK 官网下载并安装 JDK。
设置环境变量：
- 在 Windows 上，设置 JAVA_HOME 环境变量指向 JDK 安装路径。
- 在 macOS 和 Linux 上，编辑 ~/.bash_profile 或 ~/.zshrc 文件，添加以下内容：
```
export JAVA_HOME=/path/to/jdk
export PATH=$JAVA_HOME/bin:$PATH
```

3.2 安装 Android Studio

访问 Android Studio 官网下载并安装 Android Studio。
安装过程中，确保选择安装 Android SDK、Android SDK Platform、Android Virtual Device 等组件。

3.3 配置 Android SDK

打开 Android Studio，点击 "Configure" -> "SDK Manager"。
在 "SDK Platforms" 选项卡中，选择你需要的 Android 版本。
在 "SDK Tools" 选项卡中，选择 "Android SDK Build-Tools"、"Android Emulator"、"Android SDK Platform-Tools" 等工具。

3.4 设置环境变量

在 Windows 上，设置 ANDROID_HOME 环境变量指向 Android SDK 安装路径。

在 macOS 和 Linux 上，编辑 ~/.bash_profile 或 ~/.zshrc 文件，添加以下内容：

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools:$PATH

4. 安装 iOS 开发环境（适用于 iOS 开发）

4.1 安装 Xcode

访问 Mac App Store 下载并安装 Xcode。
安装完成后，打开 Xcode 并同意许可协议。

4.2 安装 CocoaPods

CocoaPods 是 iOS 的依赖管理工具，你可以通过以下命令安装：

sudo gem install cocoapods

5. 创建 React Native 项目

使用 React Native CLI 创建一个新的项目：

npx react-native init MyReactNativeApp

6. 运行项目

6.1 运行 Android 项目

打开终端，进入项目目录：
```
cd MyReactNativeApp
```
连接 Android 设备或启动 Android 模拟器。
运行以下命令启动项目：
```
npx react-native run-android
```

6.2 运行 iOS 项目

打开终端，进入项目目录：
```
cd MyReactNativeApp
```
运行以下命令启动项目：
```
npx react-native run-ios
```

7. 开发工具

7.1 代码编辑器

推荐使用 Visual Studio Code 或 WebStorm 等代码编辑器，它们支持 React Native 开发，并提供丰富的插件和扩展。

7.2 调试工具

React Native Debugger：一个独立的调试工具，支持 Redux 和 React DevTools。
Chrome DevTools：通过 Chrome 浏览器调试 JavaScript 代码。

8. 常见问题

权限问题：在 macOS 上，可能需要授予终端访问文件系统的权限。
环境变量问题：确保所有环境变量设置正确，特别是 JAVA_HOME 和 ANDROID_HOME。
依赖问题：如果遇到依赖安装问题，尝试清除 npm 缓存并重新安装依赖。

通过以上步骤，你应该能够成功搭建 React Native 开发环境，并开始开发跨平台的移动应用。如果在搭建过程中遇到问题，可以参考 React Native 官方文档或社区资源寻求帮助。

React Native 初始搭建与基础配置

在 React Native 的开发过程中，初始环境搭建和相关基础配置非常重要。接下来，我将指导你如何设置一个新的 React Native 项目并进行基本配置，以便于你开始开发。

1. 创建新项目

首先，你需要确保 React Native CLI 已安装。然后，通过以下命令创建一个新项目：

npx react-native init MyReactNativeApp

在上述命令中，MyReactNativeApp 是项目名称，可以替换为你想要的任何名称。这个命令将创建一个新的 React Native 项目及其文件结构。

2. 进入项目目录

创建完项目后，进入新创建的项目目录：

cd MyReactNativeApp

3. 安装依赖

确保你安装了项目所需的依赖项，比如 React Navigation 等。可以通过以下命令安装 React Navigation 及其依赖：

npm install @react-navigation/native
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

4. 配置 Android 和 iOS

根据不同的平台，可能需要进行一些额外的配置。

4.1 Android 项目配置

打开 Android Studio

打开 MyReactNativeApp/android 文件夹，确保你安装了 Android SDK，设定为项目可使用的 SDK 版本。

修改 Gradle 文件

在 android/build.gradle 中，添加 Google Maven 仓库：

allprojects {
    repositories {
        mavenCentral()
        google()
    }
}

配置项目的 android/app/build.gradle

确保你的配置包含以下内容：

在 android/app/build.gradle 中，设置合适的 compileSdkVersion 和 targetSdkVersion：

android {
    compileSdkVersion 31 // 或你选择的更高版本

    defaultConfig {
        applicationId "com.myreactnativeapp"
        minSdkVersion 21 // 按需求设置
        targetSdkVersion 31 // 或你选择的更高版本
        versionCode 1
        versionName "1.0"
    }
}

使 Apollo 和 JavaScript API 可用

确保在 MainActivity.java 中，添加以下代码，以便使用 React Native Navigation 的功能：

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactApplication;

4.2 iOS 项目配置

安装 CocoaPods

进入到 ios 文件夹并安装 CocoaPods 依赖：
```
cd ios
pod install
cd ..
```
打开 Xcode

使用 Xcode 打开 ios/MyReactNativeApp.xcworkspace 文件，确保在 Xcode 中配置了通用设置，比如 Apple 开发者账号等信息。

修改 Info.plist

如果你的应用需要使用某些权限，例如相机或位置服务，在 ios/MyReactNativeApp/Info.plist 中进行配置。例如：

<key>NSCameraUsageDescription</key>
<string>需要使用相机来拍照</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要使用地理位置来定位</string>

5. 运行应用

完成所有配置后，你可以在 Android 和 iOS 上运行项目：

5.1 运行 Android 应用

确保你已启动 Android 模拟器或连接 Android 设备，然后在项目目录下运行：

npx react-native run-android

5.2 运行 iOS 应用

确保打开 Xcode 模拟器，或者将物理设备连接到你的电脑。然后在项目目录下运行：

npx react-native run-ios

6. 开发基础配置

6.1 配置 ESLint 和 Prettier

为了保持代码的整洁性和一致性，可以配置 ESLint 和 Prettier。

安装 ESLint 和 Prettier：

npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier

创建 .eslintrc.js 配置文件：

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:prettier/recommended',
    ],
    parserOptions: {
        ecmaVersion: 12,
        sourceType: 'module',
    },
    rules: {
        // 在此处添加自定义规则
    },
};

创建 .prettierrc 配置文件：

{
    "semi": true,
    "singleQuote": true
}

6.2 配置 Git 版本控制

在项目根目录下运行以下命令初始化 Git 仓库：

git init

然后可以创建 .gitignore 文件，添加常见的忽略项：

node_modules
ios/Pods
*.lock

7. 重要的注意事项

确保所有依赖版本与 React Native 版本兼容。
定期检查依赖项的更新。
在开发应用过程中，保持每天进行代码的安全备份。

通过完成上述步骤，你就可以顺利搭建 React Native 的初始环境，并进行一些基础配置，这将为你的开发工作打下良好的基础。

React Native 热更新开发体验详解

热更新是 React Native 开发中的一项重要功能，它能够在不重新加载整个应用程序的情况下，快速反映代码的变更，提高开发效率。下面将介绍热更新的相关概念、配置及如何进行开发体验。

1. 什么是热更新

热更新允许开发者在应用运行时，对 JavaScript 代码进行修改，并立即在设备或模拟器上看到变更的效果。这样，开发者不需要每次修改代码后都重新启动应用，从而提升了开发速度和体验。

2. 如何使用热更新

在 React Native 中，热更新通常通过 Metro bundler 实现。Metro 是 React Native 的默认打包器，支持容器内的快速重新加载。

2.1 启动项目

确保你的 React Native 项目正在运行。你可以通过以下命令启动 Metro bundler：

npx react-native start

这将会启动一个开发服务器，并在命令行中打印出相关的日志信息。

2.2 运行应用

在另一个终端窗口中，可以运行以下命令启动应用：

对于 Android：
```
npx react-native run-android
```
对于 iOS：
```
npx react-native run-ios
```

3. 使用热更新的开发流程

3.1 修改代码

当你在项目中修改 JavaScript 代码时，Metro bundler 会自动检测这些更改。在编辑器中保存文件后，Metro 会编译这些更改，并将其推送到模拟器或设备上。在实际设备上运行时，你会在屏幕上看到一个提示，说明代码正在更新。

3.2 热重载和实时重载

React Native 提供了两种热更新方式：

热重载（Hot Reloading）：这个功能让你在不失去当前应用程序状态的情况下替换刚刚更改的文件。对于组件状态保持尤为有效。
实时重载（Live Reloading）：每当文件被保存时，应用会自动重新加载。这种方式虽然可以使你看到更改，但是会丢失组件的状态。

你可以在开发者菜单中选择激活热重载或实时重载。打开开发者菜单的方法如下：

Android：摇动设备，或者使用 adb shell input keyevent 82 命令。
iOS：双击设备的 Home 按钮，或摇动设备。

3.3 开发者菜单

在开发者菜单中，你可以控制热更新的行为，包括：

启用/禁用热重载和实时重载
查看性能监视器
打开开发者文档
刷新/重启应用

4. 调试和性能监控

在使用热更新进行开发时，你可以同时利用调试工具来诊断代码问题：

React Developer Tools：用于检查 React 组件的状态和 props。
Redux DevTools（如果使用 Redux）：用于调试 Redux 状态变化。
Flipper：一个强大的调试工具，可以集成多种功能。

5. 注意事项

确保你在开发过程中使用的是开发模式，以充分利用热更新功能。
虽然热更新非常方便，但在进行大规模更改（例如更改应用结构或依赖项）时，可能需要重新启动应用。
热更新在复杂状态管理（如 Redux 或 MobX）中可能不如预期工作，需谨慎使用。

6. 总结

热更新大大提升了 React Native 开发的效率和体验，可以让开发者快速看到代码变化的结果，避免繁琐的重启过程。在项目开发中充分利用这个功能，可以帮助你更高效地构建应用，并快速迭代。

Flexbox 在 React Native 界面布局中的应用

在 React Native 中，使用 Flexbox 来实现界面布局是非常常见和推荐的做法。Flexbox 是一种用于构建响应式布局的强大工具，它能够轻松地控制组件在屏幕上的排列方式。下面将介绍如何在 React Native 中使用 Flexbox 来实现界面布局。

1. Flexbox 基础概念

Flexbox 的基本概念包括：

主轴（Main Axis）：表示元素排列的方向，可以是水平（row）或垂直（column）。
交叉轴（Cross Axis）：与主轴垂直的方向。
容器（Flex Container）：使用 flex 布局的父组件。
项（Flex Item）：容器内部的子组件。

2. Flexbox 在 React Native 中的基本使用

下面是一些常见的 Flexbox 属性及其在 React Native 中的应用：

flexDirection: 设置主轴方向，可以是 row（默认）、column、row-reverse 或 column-reverse。
justifyContent: 控制主轴上元素的对齐方式：
- flex-start: 元素靠左（或顶部）对齐。
- flex-end: 元素靠右（或底部）对齐。
- center: 元素居中对齐。
- space-between: 在元素之间均匀分配空白空间。
- space-around: 在元素周围均匀分配空白空间。
alignItems: 控制交叉轴上元素的对齐方式：
- flex-start: 靠交叉轴的起始位置对齐。
- flex-end: 靠交叉轴的结束位置对齐。
- center: 在交叉轴上居中对齐。
- stretch: 填满容器（默认）。
flex: 定义项目的相对尺寸，表示在主轴上如何分配空间。

3. 示例：使用 Flexbox 创建简单布局

下面是一个使用 Flexbox 实现的简单布局示例。在这个示例中，我们将创建一个包含三个子组件的垂直布局，其中每个组件的高度和水平对齐方式不同。

代码示例：

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.boxText}>Box 1</Text>
      </View>
      <View style={styles.box2}>
        <Text style={styles.boxText}>Box 2</Text>
      </View>
      <View style={styles.box3}>
        <Text style={styles.boxText}>Box 3</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column', // 垂直方向
    justifyContent: 'center', // 主轴居中对齐
    alignItems: 'center', //

剩余60%内容，订阅专栏后可继续查看/也可单篇购买

前端求职突破计划文章被收录于专栏

你是否渴望全面提升前端技能？本专栏将带你畅游前端世界！从 JS 深析趣谈，让你领略 JavaScript 的独特魅力；到前端工程漫话，掌握项目构建精髓。深入洞察框架原理，探索 Node 全栈开发。泛端开发趣闻，开启多端应用新视野；揭秘商业解方奥秘，把握行业趋势。高阶专题层层剖析，助你突破技术瓶颈。更有前端面试指南，为求职保驾护航。无论你是新手小白还是资深开发者，这里都有你需要的知识盛宴！