环境搭建与资料

• RN中文网
• RN开发者网站
• 菜鸟教程 - React
• react教程
• ES6 语法
• Redux中文文档

基础知识

JS/TS Html基础

• 常用HTML标签

• 动态特性和对象属性的灵活性

JavaScript 中的动态特性和对象属性的灵活性指的是你可以在运行时动态地添加、修改和删除对象的属性。这意味着你可以在代码执行过程中动态地设置一个变量，或者向一个对象动态地添加新的属性。

• 什么是DOM

DOM 是文档对象模型（Document Object Model）的缩写。它是一种用于表示和操作 HTML、XML 和 XHTML 文档的编程接口。在 Web 开发中，DOM 提供了一种将网页文档表示为树状结构的方式，使得开发者可以通过编程方式访问、修改和操作网页的内容、结构和样式。通过 DOM，开发者可以使用 JavaScript 或其他编程语言来动态地改变网页的外观和行为。

• function关键字

可以定义 函数和类，在ES6 后一般用class定义类。

ES6之后还可以用箭头函数去定义函数

const greet = (name) => {return "Hello, " + name + "!";
}console.log(greet("Bob")); // 输出 "Hello, Bob!"

• 函数扩展

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

function getPoint() {const x = 1;const y = 10;// 属性名就是变量名, 属性值就是变量值return {x, y};
}console.log(getPoint().x)
console.log(getPoint().y)

React 基础

• props 和 state

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据

• ts与tsx文件

.ts 和 .tsx 文件都与 TypeScript 相关。.ts 文件是常规的 TypeScript 文件，而 .tsx 文件用于包含 JSX（JavaScript XML）语法的 TypeScript 文件。这使得 TypeScript 能够与 React 组件和其他基于 JSX 的代码一起使用。

• 事件处理

存在绑定的概念，在jsx里面使用 this 需要提前绑定

• 组件生命周期

• 组件导入和导出

1. 参考

// 具名导出
export function Profile() {return (<imgsrc="https://i.imgur.com/QIrZWGIs.jpg"alt="Alan L. Hart"/>);
}
// 默认导出
export default function Gallery() {return (<section><h1>了不起的科学家们</h1><Profile /><Profile /><Profile /></section>);
}...import Gallery from './Gallery.js'; // 默认导入
import { Profile } from './Gallery.js'; // 具名导入

异步编程处理

Promise

var p = new Promise((onSuccess,onFail) => {// 这里的第二个参数onFail 也可以省略if(true){onSuccess(1)}else{onFail(1)}console.log("It will still be executed here")
})p.then(v =>{console.log("onSuccess:" + v)
},r =>{console.log("onReject:" + r)
}).catch(e =>{// 如果没有设置 then的第二个参数 -- reject的回调，则会走到catch的回调// 建议不设置第二个参数，直接设置catch的回调console.log("onError:" + e)
}).finally(()=>{// 不管执行了then 还是catch 最终都会走到console.log("finally")
})// output
// It will still be executed here
// onSuccess:1
// test.ts:17
// onFinally

Generator

• 文档参考
• 基础用法

function* test(){console.log("output 1")yield 1 // 执行到这里 产出一个值 挂起 console.log("output 2")yield 2console.log("output 4")return 4
}var data = test()
console.log(data.next())
console.log(data.next())
console.log(data.next())// consoleoutput 1
{value: 1, done: false}
output 2
{value: 2, done: false}
output 4
{value: 4, done: true}

• Generator.next() 往下执行，传入true表示重置方法，从第一个yield开始执行；传入值表示给上一个yeild的产出进行赋值（方法内可能也用到这个产出的值）；
• Generator.return(value) 结束方法块并返回值，将返回 {value: 给定的值, done: true}
• Generator.throw(value) 抛出异常，优先会被内部捕获，而后内部方法执行完毕，将被外部捕获（若有）

var g = function* () {try {yield;} catch (e) {console.log('内部捕获', e);}··};var i = g();i.next();try {i.throw('第一个异常');i.throw('第二个异常');} catch (e) {console.log('外部捕获', e);}

async

• 可以理解为 Generator 的语法糖，就是把 * 换成 async，yield换成 await，且不需要像Generator多次调用，async会自动执行并输出结果（返回Promise）
• 参考
• 内部多个耗时函数同时进行

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

• 错误处理

async function f() {await Promise.reject('出错了');await Promise.resolve('hello world'); // 不会执行
}async function f() {await Promise.reject('出错了').catch(e => console.log(e));return await Promise.resolve('hello world');
}f()
.then(v => console.log(v))
// 出错了
// hello world

UI 组件

定义和使用style

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';const LotsOfStyles = () => {return (<View style={styles.container}><Text style={styles.red}>just red</Text><Text style={styles.bigBlue}>just bigBlue</Text><Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text><Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text></View>);
};const styles = StyleSheet.create({container: {marginTop: 50,},bigBlue: {color: 'blue',fontWeight: 'bold',fontSize: 30,},red: {color: 'red',},
});export default LotsOfStyles;

宽度和高度

• 、支持宽度和百分比

import React from 'react';
import { View } from 'react-native';const FixedDimensionsBasics = () => {return (<View><View style={{width:'50%', height: 50, backgroundColor: 'powderblue'}} /><View style={{width: 50, height: 100, backgroundColor: 'skyblue'}} /></View>);
};export default FixedDimensionsBasics;

• 弹性百分比宽高

import React from 'react';
import { View } from 'react-native';const FlexDimensionsBasics = () => {return (// 试试去掉父View中的`flex: 1`。// 则父View不再具有尺寸，因此子组件也无法再撑开。// 然后再用`height: 300`来代替父View的`flex: 1`试试看？<View style={{flex: 1}}><View style={{flex: 1, backgroundColor: 'powderblue'}} /><View style={{flex: 1, backgroundColor: 'skyblue'}} /><View style={{flex: 2, backgroundColor: 'steelblue'}} /></View>);
};export default FlexDimensionsBasics;	

FlexBox

触摸组件

常用交互

<ButtononPress={() => {Alert.alert('你点击了按钮！');}}title="点我！"
/>

Redux

一个状态管理容器，理解为可以用于在react-natvie 上使用的实现MVVM框架，“提供可预测化的状态管理”

基础概念

• Action ：“View”的超集，用于将数据从应用传递到Store，是Store的唯一数据来源；约定必须使用字符串类型的type 字段来标识action，也可以通过 index字段去标识。需要尽量减少在action的数据传递，可以用index代替。
• Reducer ：可以理解为一个根据action去更新state的转换器，即(oldState,action) -> newStat，业务复杂时可以拆分多个reducer，通过 combineReducers方法返回一个聚合的reducer并注册到 store 中。
• Store ：Action是描述发生了什么，reducer是描述如何根据action去改变state，而store则是将这二者结合起来，可以定义多个reducer，使用 combineReducers() 将多个 reducer 合并成为一个。现在我们将其导入，并传递 createStore()。

与安卓通信

参考

• 官网与安卓交互教程

相关类

注解等

构建打包

示例

• 直接构建：npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
• 直接使用本地的 cli版本： node ./node_modules/react-native/local-cli/cli.js bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

常用参数

自定义RN插件

• 可以设置 ContentView 为 ReactRootView
• 自定义加载bundle路径，bundle依赖的资源是相对路径，将构建出来的资源文件一起放到对应位置即可

ReactInstanceManager.builder().setApplication(application).setJSBundleFile(jsBundlePath).setJSMainModulePath(entryFile).setUseDeveloperSupport(isDebug).setIsMultiRnRender(isMultiRender).setInitialLifecycleState(lifecycleState)