一、写在前面：从零入门ReactNative的建议
- 1、需要有html、js、css等前端编程语言
- 2、然后，先去理解React基本使用
- 3、搭建ReactNative开发环境，选用iOS/Android先把项目运行起来。
- 4、学习ReactNative基本开发流程。
- 5、写页面必须先搞懂flex布局方式。
- 6、学习ReactNative相关组件。
- 7、深入学习ReactNative的原理等高级知识。
- 8、阅读源码，真正的搞懂它。
二、搭建环境
依赖Node环境
brew install node
node -v查看node版本
sudo npm cache clean -f清除缓存
sudo n stable升级到稳定版本
sudo npm install -g n按照node安装
watchman
brew install watchman
是 facebook 的一个开源项目，它开源用来监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作,例如执行一些命令等等。创建项目
npx react-native init xxx_name_xxx启动
yarn ios。
或者直接使用xcode启动工程编译调试。
三、搞懂npx react-native init xxx_name_xxx创建的工程目录
- react-native 相关命令
react-native init MyAppName --version 0.64.0
react-native --version查看版本
npx react-native info命令查看当前的版本
核心几个文件：
- 工程入口代码文件
index.js - App组件定义
App.js，当然也可以新建文件定义组件。 -
App.jsonRN模块的配置
{ "name": "HelloFirstRNDemo",
"displayName": "HelloFirstRNDemo"}
其中name配置字符串，必须和RCTRootView初始化initWithBridge:moduleName:initialProperties:用到的moduleName一样。
- iOS和Android两个文件夹是原生相关的工程。
-
package.json工程的配置文件，定义脚本命令、包依赖、测试等相关 - 相关依赖库
node_modules
DC34CDDB-9096-49D5-8532-F9B893EDC804.png
四、ReactNative开发基本流程
4.1、ReactNative代码
- 1、在
App.js中，导入RN相关的组件
import React from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
Text,
useColorScheme,
View,
} from 'react-native';
- 2、在
App.js中，自定义组件，即搭建页面。
class HelloWorld extends React.Component {
render() {
return (
<SafeAreaView>
<Text style={styles.title}> hello my world! </Text>
<ScrollView>
<Section> section 1</Section>
</SafeAreaView>
)
}
}
- 3、在
App.js中，定义样式，推荐统一定义样式，RN使用布局方式为Flex布局。
const styles = StyleSheet.create({
title: {
fontSize: 42,
},
});
- 4、在
index.js中，组件的注册
import {AppRegistry} from 'react-native';
import {HelloWorld} from './App';
import {name as appName} from './app.json';
// 第一个参数：应用名称，第二个参数：组件名。
AppRegistry.registerComponent(appName, () => HelloWorld);
4.2、原生端（iOS为例）
- 初始化
RCTBridge，RN的核心类，负责原生和React的交互
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
// 其中self为实现RCTBridgeDelegate的实例，必须实现方法如下：
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
NSURL *url = nil;
#if DEBUG
url = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
url = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
return url;
}
- 初始化ReactNative代码的加载容器类
RCTRootView
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"FirstRNDemo"
initialProperties:nil];
四、调试
开发中，一般使用iOS的模拟器调试，简单便捷。当然集成的时候需要打包到真机上运行看看。相关参见ReactNative中文网相关教程。
其他
- 关于Demo工程中的，TypeScript的语法
const App: () => React$Node = () => {...}
实际等价于const App = () => {...}
其实际是TypeScript的语法，它类型定义：const hello : string = "Hello World!"。
// 定义一个类型，这个类型是一个返回ReactNode;
也就是说() => React$Node` 是一种函数类型
// 声明一个 const 变量，类型是 TypeApp，值是一个箭头函数
const App: TypeApp = () => { ...};
学习实例
参考
Facebook-ReactNative
ReactNative中文网
React-Native 样式指南
Flex 布局教程：语法篇
RN2--JavaScript、ES6、Node
React Native在美团外卖客户端的实践
React Native 的未来与React Hooks
《React Native 精解与实战》 读书笔记
- 书籍：
《React Native 精解与实战》
