2019独角兽企业重金招聘Python工程师标准>>> 
#0、手把手教React Native实战之开山篇
##作者简介
东方耀 Android开发
RN技术 facebook
github
android ios 原生开发
react reactjs nodejs 前端 进入 移动互联网
js nodejs 大波
app
个人角度 学习的必要性 全栈工程师的捷径
公司角度 组件化 成本降低 热更新
加作者微信公众号（dongfangyao888）或扫描下面二维码
推送高清视频教程+语音解说+课堂笔记和源码
##技术背景
app store
facebook html5 native app
Hybrid app native + web 混合模式
##视频课程简介
1.基础语法
2.API和组件
3.App更新 热更新上架
4.实战项目 3个 RN技术开发
##0、配套视频(下载地址)：https://yunpan.cn/cY4JWzTtmVyNY 访问密码 7b60 或 http://vdisk.weibo.com/s/aLDC43gEH4wZV
#36、手把手教React Native实战之API学习AppRegistry
只有配合使用React Native的常用组件和常用API，才能更好的开发应用程序
AppRegistry是JS运行所有React Native应用的入口。应用的根组件应当通过AppRegistry.registerComponent方法注册自己，当注册完后，原生系统才可以加载应用的bundle包并且触发AppRegistry.runApplication来真正运行应用。
##36、配套视频(下载地址)：https://yunpan.cn/cRQVAkkrfVKDx 访问密码 40dc
#37、手把手教React Native实战之API学习AsyncStorage
AsyncStorage是一个简单的、具有异步特性的键值对的存储系统，全局的！替代LocalStorage
AsyncStorage里面都有一个回调函数，而回调的第一个参数都是错误对象，如果发生错误，该对象就会展示错误信息，否则为null；每个方法都会返回一个Promise对象。
案例：购物车（数据共享）
列表页 结算页
1.数据模型构建
2.列表项Item组件（es6中默认属性与属性类型的定义）
3.列表组件List
guid代码 生成
4.购物车组件
去取AsyncStorage中存储的数据，一定是在DidMount生命周期里，不能在WillMount里
5.将组件串联起来
推荐由React Native中文网封装维护的react-native-storage模块，提供了较多便利功能。
##37、配套视频(下载地址)：http://www.reactnative.vip/forum.php?mod=viewthread&tid=39&extra=page%3D1
#38、手把手教React Native实战之物理back键详解
在上一节课代码的基础上：
componentWillMount() {
if (Platform.OS === 'android') {
BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
}
}
componentWillUnmount() {
if (Platform.OS === 'android') {
BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
}
}
onBackAndroid = () => {
const { navigator } = this.props;
const routers = navigator.getCurrentRoutes();
console.log('当前路由长度：'+routers.length);
if (routers.length > 1) {
navigator.pop();
return true;//接管默认行为
}
return false;//默认行为
};
说明：BackAndroid在iOS平台下是一个空实现，所以理论上不做这个Platform.OS === 'android'判断也是安全的。
如果所有事件监听函数中，没有任何一个返回真值，就会默认调用默认行为
navigator是同一个，这个事件在最外层注册就行（不是initialRoute的组件，是AppRegistry的组件），
否则会调用多次pop的，这个代码接管的是整个应用的后退键
放到initialRoute里会有问题，你两三个页面测不出来，页面层次多了组件会unmount，然后事件就丢了
addEventListener()第三个参数useCapture (Boolean)详细解析：
•true 的触发顺序总是在 false 之前；
•如果多个均为 true，则外层的触发先于内层；
•如果多个均为 false，则内层的触发先于外层。
需要注意的是，不论是bind还是箭头函数，
每次被执行都返回的是一个新的函数引用，
因此如果你还需要函数的引用去做一些别的事情（譬如卸载监听器），那么你必须自己保存这个引用
// 错误的做法
class PauseMenu extends React.Component{
componentWillMount(){
AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
}
componentDidUnmount(){
AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
}
onAppPaused(event){
}
}
// 正确的做法1
class PauseMenu extends React.Component{
constructor(props){
super(props);
this._onAppPaused = this.onAppPaused.bind(this);
}
componentWillMount(){
AppStateIOS.addEventListener('change', this._onAppPaused);
}
componentDidUnmount(){
AppStateIOS.removeEventListener('change', this._onAppPaused);
}
onAppPaused(event){
}
}
// 正确的做法2
class PauseMenu extends React.Component{
componentWillMount(){
AppStateIOS.addEventListener('change', this.onAppPaused);
}
componentDidUnmount(){
AppStateIOS.removeEventListener('change', this.onAppPaused);
}
onAppPaused = (event) => {
//把方法直接作为一个arrow function的属性来定义，初始化的时候就绑定好了this指针
}
}
例子：“再按一次退出应用”
//到了主页了
if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
//最近2秒内按过back键，可以退出应用。
return false;
}
this.lastBackPressed = Date.now();
ToastAndroid.show('再按一次退出应用',ToastAndroid.SHORT);
return true;
我们在监听函数中不能决定是否要调用默认行为，要等待一个异步操作之后才调用默认行为，此时可以通过第二种办法：
使用BackAndroid.exitApp()来退出应用。
例子：在退出应用之前保存数据
写法1：
onBackAndroid = () =>{
saveData().then(()=>{
BackAndroid.exitApp();
});
return true;
}
在监听函数中，我们开始异步事件，并直接return true。此时默认行为不会被调用。当保存完毕后，我们调用exitApp()，触发默认行为，退出应用。
写法2：
onBackAndroid = async () =>{
await saveData();
BackAndroid.exitApp();
}
这里我们用了async函数，async 函数总是返回一个Promise，Promise作为一个对象，也被认为是一个“真值”，所以这种情况下默认行为总是不会被调用。当保存完毕后，我们调用exitApp()，触发默认行为，退出应用。
根据当前界面决定作何动作
有时候我们有这样的需求：当用户处于某些界面下时，back键要做特殊的动作，如：提示用户是否要保存数据，或者解锁界面禁止back键返回等等。此时，最佳实践是在route或route中对应的Component上保存关于如何处理back键的信息：
onBackAndroid = () => {
const nav = this.navigator;
const routers = nav.getCurrentRoutes();
if (routers.length > 1) {
const top = routers[routers.length - 1];
if (top.ignoreBack || top.component.ignoreBack){
// 路由或组件上决定这个界面忽略back键
return true;
}
const handleBack = top.handleBack || top.component.handleBack;
if (handleBack) {
// 路由或组件上决定这个界面自行处理back键
return handleBack();
}
// 默认行为： 退出当前界面。
nav.pop();
return true;
}
return false;
};
##38、配套视频(下载地址)：http://www.reactnative.vip/forum.php?mod=viewthread&tid=67&extra=page%3D1
#39、手把手教React Native实战之复杂的组件通讯三种方案
接着上节课的代码，从一个bug入手，透过问题去学习，大大提升学习效率
解决bug：组件pop之后，之前的组件没有更新？
例子：在购物车里清空了，但是pop之后，商品详情页并没有更新？
3.更新阶段
主要发生在用户操作之后或父组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整
componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
pop之后，数据已经改变了，但是之前的组件没什么变化，组件的数据不同步了，解决方案：
方案1：监听didfocus事件，focus到当前路由的时候重新加载数据
navigationContext.addListener('didfocus', callback)来替代
componentWillMount() {
console.log('List---componentWillMount');
let navigator = this.props.navigator;
let callback = (event) => {
console.log(
'List : 事件类型',
{
route: JSON.stringify(event.data.route),
target: event.target,
type: event.type,
}
);
};
// Observe focus change events from this component.
this._listeners = [
navigator.navigationContext.addListener('willfocus', callback),
navigator.navigationContext.addListener('didfocus', callback),
];
}
componentWillUnmount(){
console.log('List---componentWillUnmount');
this._listeners && this._listeners.forEach(listener => listener.remove());
}
更新去取数据不用放到componentDidMount，直接放到didfocus的回调即可 不太稳定
方案2：参考第15讲视频Navigator参数传递：往下一个路由push的时候传递参数（一个回调），在组件pop之前先调用此回调刷新数据
navigator.push({
name: 'GouWu',
component: GouWu,
params: {
fetchData: function () {
console.log('启动fetchData里的方法了');
AsyncStorage.clear(function (err) {
if (!err) {
_that.setState({
count: 0,
});
alert('购物车已经清空');
}
});
}
}
})
这是在点击清空购物车之后，马上pop，同时去触发回调
clearStorage() {
let _that = this;
//触发一下回调 让数据同步
console.log('点击了清空购物车');
if (this.props.fetchData) {
console.log('点击了清空购物车----回调去影响List页面');
this.props.fetchData();
}
const { navigator } = this.props;
if (navigator) {
navigator.pop();
}
}
还有一种情况：在点击清空购物车之后，不马上pop，而是通过点击物理back键去触发回调
这个就要复杂很多，
错误做法：
const top = routers[routers.length - 1];
console.log('栈顶的路由---'+top.component);
if (top.component.props.fetchData) {
console.log('回调fetchData了');
top.component.props.fetchData();
}
注意： route.component是一个class 而不是一个object instance ，在里面找props是不可能找得到的，
如果一定需要从route上找到instance，需要在renderScene里给render的东西指定ref
类似 route.ref = r} />，然后通过route.ref来访问，但注意不应该假设route.ref总是有值
一定要判断下 if(route.ref)
方案3：采用redux/event等方式完成跨组件通讯
社区主流还是redux，但是建议大家抛弃redux了，因为太繁琐了，我们马上有更方便的架构，来自nodejs社区的，不是前端的方案
RN官方并不提供这个方案，redux也不是官方的
涉及到十几个插件 核心是decorator 都是npm上的插件
主要是一种 前端后端 结构和风格一致 的思想
注意：方案1不推荐，推荐方案2或3
##39、配套视频(下载地址)：http://www.reactnative.vip/forum.php?mod=viewthread&tid=76&extra=page%3D1
#40、手把手教React Native实战之安装Nuclide与API学习AlertIOS
安装mac下React Native的开发工具Nuclide
FaceBook官方：nuclide 只支持Mac 基于Atom（github的）（Atom最大的特色就是可以安装很多的插件来完成我们的需求）炫酷插件
https://atom.io/ 下载atom
https://nuclide.io/
https://github.com/facebook/nuclide
打开atom，如果nuclide安装成功，则可以看到nuclide的欢迎界面
brew update && brew upgrade
flow 一个静态的对js类型检查器
brew install flow
保存：mac (command+s) windows(win+s)
AlertIOS他的静态方法有两个：
alert(title,message,[] buttons) 普通对话框
prompt(title,message,[] buttons) 提供输入的对话框
如果buttons为空数组，默认也会有一个ok按钮，如果数据的长度过长，按钮就会垂直排列！
##40、配套视频(下载地址)：http://www.reactnative.vip/forum.php?mod=viewthread&tid=99&extra=page%3D1
#41、手把手教React Native实战之API学习DatePickerAndroid与TimePickerAndroid
日期、时间选择器 Android中是以api的形式，IOS是以组件的形式
DatePickerAndroid：
static open(options: Object)
打开一个标准的Android日期选择器的对话框
可选的options对象的key值如下：
date (Date对象或毫秒时间戳) - 默认显示的日期
minDate (Date对象或毫秒时间戳) - 可选的最小日期
maxDate (Date对象或毫秒时间戳) - 可选的最大日期
在用户选好日期后返回一个Promise，回调参数为一个对象，其中包含有action, year, month (0-11), day。如果用户取消了对话框，Promise仍然会执行，返回的action为DatePickerAndroid.dismissedAction，其他几项参数则为undefined。所以请在使用其他值之前务必先检查action的值。
注意：当Android手机操作系统低于5.0时，设置最小和最大日期会导致api异常，最好不要设置，而是在用户选择完成后再进行检查；api中的Open函数打开的界面是系统的界面，不能设置其任何显示样式，如何手机显示不同是因为系统被厂商深度定制了
TimePickerAndroid：
static open(options: Object)
打开一个标准的Android时间选择器的对话框。
可选的options对象的key值如下：
hour (0-23) - 要显示的小时，默认为当前时间。
minute (0-59) - 要显示的分钟，默认为当前时间。
is24Hour (boolean) - 如果设为true，则选择器会使用24小时制。如果设为false，则会额外显示AM/PM的选项。如果不设定，则采取当前地区的默认设置。
在用户选好时间后返回一个Promise，回调参数为一个对象，其中包含有action, hour (0-23), minute (0-59)。如果用户取消了对话框，Promise仍然会执行，返回的action为TimePickerAndroid.dismissedAction，其他几项参数则为undefined。所以请在使用其他值之前务必先检查action的值。一般用TimePickerAndroid.timeSetAction的取反来判断
注意：is24Hour在某些手机上不会产生作用，用户没有选择时间是因为按下了返回键或取消键；同样的api中的Open打开的是系统的界面
##41、配套视频(下载地址)：http://www.reactnative.vip/forum.php?mod=viewthread&tid=107&extra=page%3D1
#42、手把手教React Native实战之IOS日期时间组件DatePickerIOS
nuclide代码自动补全提示的插件：
atom-react-native-css atom-react-native-autocomplete
nuclide自动保存代码的插件：
autosave 需要setting enable
日期时间选择器 在IOS中是以组件的形式 DatePickerIOS支持View组件的所有属性，可以设置他的宽度、高度、位置等
这是一个受约束的(Controlled)组件，所以你必须监听onDateChange回调函数并且及时更新date属性来使得组件更新，否则用户的修改会立刻被撤销来确保当前显示值和props.date一致。
除了View组件的属性，DatePickerIOS组件还支持如下属性：
date 当前被选中的日期和时间 Date类型
maximumDate minimumDate
minuteInterval (1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)
用来设置可选的最小分钟单位
mode ('date', 'time', 'datetime') 选择器模式
onDateChange 当用户修改日期或时间时调用此回调函数。
唯一的参数是一个Date对象，表示新的日期和时间（也就是用户选择的）
timeZoneOffsetInMinutes 以分钟为单位的时区时间差 默认情况下，选择器会选择设备的默认时区。通过此参数，可以指定一个时区。举个例子，要使用北京时间（东八区），可以传递8 * 60。
注意：必须要把一个日期类型的状态机变量赋值给DatePickerIOS组件的date属性，并且在用户操作DatePickerIOS组件修改后，用onDateChange回调的新的date去更新对应的状态机变量，否则会出现用户使用DatePickerIOS组件修改改了时间，几秒钟后，DatePickerIOS组件又回到了原来的时间的情况。
warning：Invalid prop 'date' of type 'Number'
warning：Required prop 'onDateChange' was not specified
警告的解决方案：
这是一个bug，升级到0.28即可，如果不想升级，可以照这个修改：
node_modules/react-native/Libraries/Components/DatePicker
https://github.com/facebook/react-native/commit/cec913e7ce05d26181ab4d46e2e41d72acdfb87d
http://stackoverflow.com/questions/35764088/prop-issues-with-datepickerios-in-react-native
##42、配套视频(下载地址)：http://www.reactnative.vip/forum.php?mod=viewthread&tid=113&extra=page%3D1
#43、手把手教React Native实战之API学习ActionSheetIOS
需求：分享和弹出多项选择操作！在IOS开发中，ActionSheet提供了这样的功能，而React Native同样封装了该功能，那就是ActionSheetIOS
提供了两个静态方法：
static showActionSheetWithOptions(options,callback):
在iOS设备上显示一个ActionSheet弹出框，其中options参数为一个对象，其属性必须包含以下一项或多项：
options（字符串数组） - 一组按钮的标题（必选）
cancelButtonIndex（整型） - 选项中取消按钮所在的位置（索引）
destructiveButtonIndex（整型） - 红色高亮显示的位置（索引）
title（字符串） - 弹出框顶部的标题
message（字符串） - 弹出框顶部标题下方的信息
static showShareActionSheetWithOptions(options,failureCallback,successCallback)：
在iOS设备上显示一个分享弹出框，其中options参数为一个对象，其属性必须包含以下一项或多项：
message（字符串） - 要分享的信息
url（字符串） - 要分享的URL地址
注：如果url指向本地文件，或者是一个base64编码的url，则会直接读取并分享相应的文件。你可以用这样的方式来分享图片、视频以及PDF文件等。
##43、配套视频(下载地址)：http://www.reactnative.vip/forum.php?mod=viewthread&tid=117&extra=page%3D1
#44、手把手教React Native实战之API学习-网络状态与数据交互
##先来看看Android原生的：
（安装最新版的AS）
地址（）：https://sites.google.com/a/android.com/tools/download/studio/canary/latest
Latest Android Studio Canary Build: 2.2 Preview 4
Windows（用迅雷下载）: https://dl.google.com/dl/android/studio/ide-zips/2.2.0.3/android-studio-ide-145.3001415-windows.zip (436.8 MB)
Mac: https://dl.google.com/dl/android/studio/ide-zips/2.2.0.3/android-studio-ide-145.3001415-mac.zip (436.9 MB)
Linux: https://dl.google.com/dl/android/studio/ide-zips/2.2.0.3/android-studio-ide-145.3001415-linux.zip (436.4 MB)
Android_SDK也得更新一下
这里有一个坑：用最新版的as去打开之前的项目，报错：Error:Could not find com.android.tools.build:gradle-core:2.2.0-alpha2
解决办法：复制旧版本的as中的2.2.0-alpha2到新版本as（有10几处地方），打开后会提示升级，升级到最新版本的alpha4
启用gradle_daemon加速器：https://docs.gradle.org/2.9/userguide/gradle_daemon.html
##网络连接状态NetInfo：
获取网络状态是异步的，使用了js的Promise机制
Android平台的网络连接类型状态如下:
1.NONE 设备没有网络连接
2.BLUETOOTH 蓝牙数据连接
3.DUMMY 虚拟数据连接
4.ETHERNET 以太网数据连接
5.MOBILE 手机移动网络数据连接
6.MOBILE_DUN 拨号移动网络数据连接
7.MOBILE_HIPRI 高权限的移动网络数据连接
8.MOBILE_MMS 彩信移动网络数据连接
9.MOBILE_SUPL SUP网络数据连接
10.VPN 虚拟网络连接 ，最低支持Android API 21版本
11.WIFI 无线网络连接
12.WIMAX wimax网络连接
13.UNKNOWN 未知网络数据连接
根据文档说明:除此之外的其他一些网络连接状态已经被Android API隐藏了，但是我们可以在有需要的时候进行使用。
IOS平台的网络连接类型状态如下:
1.none 设备没有联网
2.wifi 设备联网并且是连接的wifi网络，或者当前是iOS模拟器
3.cell 设备联网是通过连接Edge,3G,WiMax或者LET网络
4.unknown 该检测发生异常错误或者网络状态无从知道
NetInfo有两个监听：
1.网络状态改变的监听 回调当前网络的状态
2.网络是否连接的监听 回调true或false
Android独有的特色：
1.NetInfo.isConnectionExpensive判断当前网络是否计费
2.AndroidManifest.xml文件中添加如下权限字段：(需视频演示)
能否通过adb启动activity：adb shell am start -n com.linkingdemo/.MainActivity
测试是否能用url的形式打开app对应的activity：adb shell am start -W -a android.intent.action.VIEW -d "dfy://reactnative.vip/data" com.linkingdemo
IOS
首先我们需要在AppDelegate.m文件中引入RCTLinkingManager.h头文件，那么就需要我们引入相关配置了，关于库的引入默认项目都默认已经配置好的，但是我们需要配置一个库头文件搜索路径
##63、配套视频(下载地址)：http://www.reactnative.vip/thread-327-1-1.html
#未完待续。。。作者：东方耀 QQ：309623978