通过学习RN技术，平常自己的一些笔记整理，希望借鉴

最新推荐文章于 2023-11-20 16:06:37 发布

原创

最新推荐文章于 2023-11-20 16:06:37 发布 · 990 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#rn使用

本文档详细记录了React Native（RN）的环境搭建步骤，包括Node.js、Python、JDK、Android SDK等必备组件的安装路径，以及如何配置Yarn、React Native CLI。此外，还介绍了创建项目、运行项目到模拟器的不同方法，以及RN项目的结构和基本组件的使用。文章最后提及了热更新、离线打包和原生模块等内容，是RN初学者的实用参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、RN搭建开发环境
1.安装依赖软件：
Node.js 8.3以上
D:\Program Files\nodejs\

Python 2.x以上
D:\Python27\
D:\Python27\Scripts
JDK 1.8
Java_Home=C:\Program Files\Java\jdk1.8.0_65
%Java_Home%\bin
Android SDK
ANDROID_HOME=D:\AndroidStudio\SDK
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools

2.Yarn、React Native的命令行工具

Yarn与npm都是软件管理工具，Yarn速度快很多

npm(该命令是node.js中的命令，用于安装软件)

设置npm镜像：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Yarn、React Native的命令行工具（react-native-cli）
npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global4

测试:
react-native --version
yarn -v

3.环境使用
React开发环境：VScode
Node.js 8.3以上

Android环境（编译运行环境）：AS
SDK platform:开发版本库
Android SDK Platform 26 （0.56）
Android SDK Platform 23 （0.55.4）

Google Api Intel x86 Atom_64 System Image ; intel HAXM （创建虚拟机使用）

SDK bulid tools:代码编译工具
26.0.3 （0.56）
23.0.1 （0.55.4）

4.创建项目运行到模拟器：
方式一：
1.创建项目
react-native init HelloWorld
react-native init HelloWorld --version 0.55.4
2.进入到项目目录中
cd HelloWorld 目录cmd
3.运行
react-native run-android

方式二:
1.导入新项目
使用其他可用项目即可
2.进入到项目目录中
cd HelloWorld 目录cmd
3.运行
react-native run-android

方式三:
Android Studio打开android项目，编译运行，到模拟器
模拟器配置设置:
摇一摇：启动设置页面 Ctrl+M
HOST：配置服务连接地址: 11.11.11.11:8081

开启node服务:
npm start开启

方式四:
直接使用.apk文件转入模拟器
模拟器配置设置:
摇一摇：启动设置页面 Ctrl+M
HOST：配置服务连接地址: 11.11.11.11:8081
开启node服务:
npm start开启

5.RN常用命令:
react-natice init HelloWorld
react-native init HelloWorld --version 0.55.4
react-native --version
react-native run-android
react-narive run-ios

npm install -g yarn react-native-cli 安装软件
npm start 开启Node服务

二、RN项目结构:
android 编译运行代码

ios 编译运行代码

node_modules 自动生成三方依赖库

App.js 显示的组件页面

index.js 渲染显示页面

AppRegistry.registerComponent('HelloWorld', () => App);
将APP组件渲染到Android获取IOS中"HelloWorld"标记

Android渲染路径:
@Override
protected String getJSMainModuleName() {
return "index";
}

@Override
protected String getMainComponentName() {
return "HelloWorld";
}

IOS渲染路径:
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"HelloWorld"
initialProperties:nil
launchOptions:launchOptions];
package.json 系统项目配置文件

三、页面组件分析
index.js 渲染显示页面
导入依赖:react-native
import { AppRegistry } from 'react-native';
import App from './App';

渲染:将App组件替换HelloWorld标记
AppRegistry.registerComponent('HelloWorld', () => App);

App.js 显示的组件页面

导入依赖:react(自定义组件类) react-native(使用RN中的控件和API)
import React, { Component } from "react";
import { StyleSheet, Text, View } from