学习笔记：RN概述

一、写在前面：从零入门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.json RN模块的配置

{ "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 = () => { ...};

学习实例

RNDemo

---

参考

Facebook-ReactNative
ReactNative中文网
React-Native 样式指南
Flex 布局教程：语法篇
RN2--JavaScript、ES6、Node

React Native在美团外卖客户端的实践
React Native 的未来与React Hooks
《React Native 精解与实战》 读书笔记

• 书籍：
  《React Native 精解与实战》