React Native - 学习记录

Posted by 陈陈君 on 2021-01-17
Estimated Reading Time 3 Minutes
Words 889 In Total
Viewed Times

React Native

React Native , 是基于 React 的框架,能够使用 React 编写原生移动应用。可以一次编写同时发布 安卓 和 IOS 两个平台。在使用 React Native 之前需要有 React 框架、JavaScript 、flex 布局的基本知识。

准备工作

  • Android Studio
  • Android SDK
  • Node.js
  • 手机或模拟器
  • JDK
  • Scrcpy

Android Studio

Android Studio 是谷歌的安卓开发集成环境。
https://developer.android.google.cn/studio/

Android SDK

Android SDK是安卓软件开发的工具包,提供了安卓各类的 API。
https://www.androiddevtools.cn/ (梯子访问)

JDK

安卓离不开 Java,所以需要 Java 的开发环境。
https://www.oracle.com/java/technologies/javase-downloads.html

yarn

yarn 是Facebook推出的包管理器。与 npm 类似。安装 React Native 前需要准备 yarn ,需要安装 Node.js 。https://nodejs.org/zh-cn/

随后使用命令安装 yarn

1
npm install yarn -g

手机或模拟器

为了方便演示和调试应用,需要准备一台手机或模拟器(这里以安卓为例)

Scrcpy

Scrcpy 是一个手机投屏的软件。连上你的安卓手机,使用它会更方便查看演示效果。它不仅支持有线投屏也支持无线投屏。使用前需要配置环境变量。Path 以保证能在任何路径下使用 scrcpy 命令。

启用ADB调试

在 Android SDK 和 scrcpy 配置环境变量后,需打开 Android 手机的 ADB调试。ADB 调试开关在 开发者选项 中找到。一般开发者选项会隐藏起来,需要打开 关于手机 点 5 下 内部版本 以显示。

网络ADB

一般手机的 ADB调试 是和 网络ADB调试 是一起启动的。如果是类原生系统还需要手动打开 网络ADB调试。

无线投屏

无线投屏需要手机和电脑处于局域网中,在完成上面的操作后,键入命令 adb connect [手机ip地址] 然后键入 scrcpy 即可投屏到电脑上。

1

连上手机,现在,准备工作就已经做好了。

安装 React Native 脚手架

虽然 React Native项目能够通过 npx 构建但安装脚手架后构建更快速。

1
npm install react-native -g

-g 是安装到 Node.js 中并提供全局访问,不用 -g 则是不提供全局访问。为了方便使用建议加上 -g

构建 React Native 项目

1
react-native init [项目名]

等待 react native 项目构建完成

2

项目打包运行至手机上。

c d 到项目目录下,键入命令。

1
yarn android

稍等片刻,就会上传一个默认的 App, ReactNative 例子。

3

HelloWorld

上面成功打包并运行了默认的App示例到手机上。现在,我们可以试着自己来写一个经典的 HelloWorld。

项目结构

在写 HelloWorld 之前,需要了解一下项目中的主要文件结构。

ReactNative 项目中的文件目录结构

文件 描述
App.js 项目的根组件
index.js 项目的入口文件
package.json 项目的描述文件
android 编译安卓相关
ios 编译ios相关

我们可以进到项目的根组件 App.js 来编写属于我们的第一个HelloWorld!
在此之前可以把它里面的代码全部删除掉。然后重新进行编写。

1
2
3
4
5
6
7
8
9
import React from 'react';
import {View,Text} from 'react-native';

const Index = () =>
<View>
<Text>Hello World</Text>
</View>

export default Index;

当代码保存后会发现手机App中发生了改变,这一点与 React 项目几乎一致,使用 JSX 来编写元素依然是主要的。

未完待续 : )