学习笔记：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 (
      
         hello my world! 
        
           section 1
      
    )
  }
}

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 精解与实战》