winney

React Native官网

React Native 中文网

移动App的开发模式

• 原生开发
• 原生App
• Android | iOS | Windows

• 混合开发
• 混合App
• React Native | Weex | Flutter

• H5开发
• Web App
• HTML、CSS、JavaScript

跨平台框架的比较

移动端跨平台框架对比

移动App的开发模式

React Native的优点

• 开发体验好
  • 用统一的代码规范开发移动端程序，不用关注移动端的差异
• 开发成本低
  • 开发一次，可以生成Android和iOs两个系统上的App- Learn once, write anywhere
• 学习成本低
  • 只要掌握JavaScript和React，就可以进行移动端开发了

React Native的不足

• 不成熟;
  • 项目版本更新维护较频繁，学习成本高;
  • 试错成本高，有些问题较少解决方案，易耽误开发进度。
• 性能差
  • 整体性能仍不如原生
• 兼容性差
  • 涉及底层的功能，需要针对Android和iOs双端单独开发;

基础环境搭建

• 安装Node.js

  • Node.js的版本应>=12(推荐安装LTS版本)
  • npm config set registry https://registry.npm.taobao.org

• 安装Yarn

  1	npm install -g yarn

• 安装 React Native脚手架

  1	npm install -g react-native-cli

需要安装Android开发环境、iOS开发环境

Window下只能安装Android开发环境

Mac下可以安装Android开发环境、iOS开发环境

Android环境

• 安装JDK
• 安装Android Studio
• 安装Android SDK
• 配置环境变量

·下载JDK(Java SE Development Kit)
https:/www.oracle.com/jiava/technologies/iavase/javase-jdk8-downloads.html·JDK的版本必须是1.8(1.8版本，官方也直接称8版本)
·目前不支持高于1.8的JDK版本
·下载时要求登陆(请先注册Oracle账号)
·或者直接找老师，获取上面的安装包
·安装JDK(一直“下一步”)
·命令行中，输入java -version，验证安装是否成功
L, A, G，。u———

·下载Android Studio
https://developer.android.com/studio/index.html·安装Android Studio (一直“下一步”)·启动Android Studio
·初次启动，需要安装组件（组件约2GB，安装后占用空间约8GB)·安装组件的过程巨长巨长巨长，要有耐心

. What
·Android SDK是针对安卓开发的套件. Why
·虽然Android Studio默认会安装最新版本的Android SDK
·但是，目前编译React Native应用需要的是Android 10(Q)版本的SDK
· How
·打开Android Studio，在菜单Tools下找到”SDK Manager”

·配置ANDROID_HOME环境变量
·打开Android Studio，点击菜单Tools → SDK Manager，找到Appearance &Behavior → System Settings → Android SDK

·跟ANDROID_HOME相关的环境变量
·%ANDROID_HOME%\platform-tools%ANDROID_HOME%\emulator
·%ANDROID_HOME%\tools·%ANDROID_HOME%\tools\bin
—L，A,G，。u

react native 进阶

react native 高级

ECMAScript新功能

优化JS代码的34种方法

1. 含有多个条件的if语句

我们可以在数组中存储多个值，也可以使用数据的includes方法。

1
2
3
4
5
6
7
8

// longhand
if (x=== 'abc' || x === 'def' || x === 'ghi' || x ===jkl') {
	// logic
}
// shorthand
if ([ 'abc ', 'def', 'ghi', 'jkl' ].includes (x)) {
    // logic
}

2. If … else的缩写法

当我们在if-else条件下的逻辑比较简单时，我们可以使用三元条件运算符。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Longhand
let test: boolean;

if(x > 100){
	test = true;
}else {
    test = false;
}

// shorthand
let test = (x > 10) ? true : false;

// or we can use directly
let test = x > 10;

console.log (test) ;

如果包含嵌套条件，也可以使用这种方法。

1
2
3
4
5

let x = 300,
test2 = (x > 100) ? 'greater 100' : (x<50) ? 'less 50' : 'between50 and 100';

console.log (test2);    // "greater than 100"

3. 定义变量

当我们想要定义两个变量，并且这两个变量拥有相同的值或者类型的话，我们可以运用此种简略的表达方式。

1
2
3
4
5
6

// Longhand
let testl;
let test2 = 1;

// Shorthand
let test1, test2 = 1;

4. 关于Null, undefined的检查

当我们创建新的变量时，有时候需要检查我们引用变量的值是否为null或是undefined，js本身就有一种缩写法能实现这个功能

1
2
3
4
5
6
7

// Longhand
if (testl !== null || test1 !== undefined || test1 !== '') {
	let test2 - test1;
}

// shorthand
let test2 = test1 || '';

5. Null值检查与指定默认赋值

1
2
3
4

let test1 = null,
	test2 = test1 || '';
	
console.log ("null check", test2); // output will be ""

6. Undefined值检查与默认赋值

1
2
3
4

let testl = undefined,
	test2 = testl l| '';
	
console.log ("undefined check", test2); // output will be ""

正常值检查

1
2
3
4

let test1 = 'test',
    test2 = test1 || '';
    
console.log(test2);  // output: 'test'

（现在我们可以在4、5、6条中使用 ?? 运算符了）

7. 聚合运算符

**??**是聚合运算符，如果左值为null或undefined，就返回右值。默认返回左值。

1
2
3
4
5

const test= null ?? 'default';
console.log(test);
// expected output: "default"const test1 =0 ?? 2;
console.log(test1);
// expected output: 0

8. 为多个变量赋值

当我们处理多个变量，想为不同的变量赋不同的值时，就会真正发现这种简略的表达方式的实用之处了。

1
2
3
4
5
6
7
8

// Longhand
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;

// Shorthand
let [testl, test2, test3] = [1，2，3];

9. 赋值运算符简略的表达方式

通常，我们会在程序中处理大量的算术运算符。而对于JavaScript变量的赋值运算符来说，这是其中一个实用的技巧。

1
2
3
4
5
6
7
8
9

// Longhand
testl = testl + l;
test2 = test2 - 1;
test3 = test3 *20;

// Shorthand
test1++;
test2--;
test3 *= 20;

10. 判断变量是否存在的缩写法

A域名下的参数传给B域名下的页面

场景1：推广页面要求一定要使用A域名，而推广页面的网页内容是在B域名下，而B域名推广页需要从A域名的推广链接上获取参数。

这里是填写的推广链接是A域名下的，但是实际用户访问的页面是B域名下的game.html页面

例如：

A域名的推广链接：http://A.com/iframeParentPage.html?app_id=70116&user=admin&age=18

B域名推广页面：http://B.com/game.html?game_id=10002&platform_id=205&type=game

A、B域名在不同的主体下，不能把B域名下的页面放到A域名的服务器上。

B域名需要拿到app_id等参数。

1. A域名下iframeParentPage.html中获取参数：window.location.search

   1	console.log(window.location.search); // ?app_id=70116&user=admin&age=18

2. 携带A域名下iframeParentPage.html中的参数，进行页面跳转

   1	window.location.href = "http://B.com/game.html?game_id=10002&platform_id=205&type=game&" + window.location.search.substring(1);

   备注：

   1. 使用window.location.search.substring(1);是要把?去掉

   2. 要在type=game后面加上&

3. 在B域名下的game.html页面中获取参数

   1 2 3 4 5 6

   const queryParams = new URLSearchParams(window.location.search); console.log('queryParams'); console.log(queryParams); console.log(queryParams.get('app_id')); console.log(queryParams.get('user')); console.log(queryParams.get('age'));

iframe嵌套页面-父子页面传参

查询字符串（URL 参数）

场景2：推广页面要求一定要使用A域名，而推广页面的网页内容是在B域名下，而B域名推广页需要从A域名的推广链接上获取参数。

这里是填写的推广链接是A域名下的，但是实际用户访问的页面是A域名下iframe嵌套了B域名下的game.html的页面，也就是URL中显示的是A域名

A域名下的页面：

1

<iframe title="游戏页面" src="" frameborder="0"></iframe>

1

document.querySelector('iframe').src= "http://A.com/iframeParentPage.html?app_id=70116&user=admin&age=18&" + window.location.search.substring(1);

B域名下的页面：

1
2
3
4
5
6

const queryParams = new URLSearchParams(window.location.search);
console.log('queryParams');
console.log(queryParams);
console.log(queryParams.get('app_id'));
console.log(queryParams.get('user'));
console.log(queryParams.get('age'));

同域名下-使用缓存

A页面：

1

localStorage.setItem('params', window.location.search.substring(1));

B页面：

1
2
3
4
5
6

var params = localStorage.getItem('params');
console.log(params);
const queryParams = new URLSearchParams(params);
console.log(queryParams.get('app_id'));
console.log(queryParams.get('user'));
console.log(queryParams.get('age'));

注意：不同域名，使用这个方法不可以。

根据需要，使用localStorage或sessionStorage