20160908

发表于 2016-09-08 |

React Native 打开Remote Debugger请求服务器的时候出现如下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8081' is therefore not allowed access.

按照google,stackoverflow,GitHub issues里的方法始终无法解决，真是让人抓狂，
无法在Chrome里调试，你特么逗我了，那我要你何用，拿刀来！！！最后没办法只能在Android Studio里查看
React Native 里console.log()和redux-logger的输出日志。
既然Android Studio logcat 可以打出React Native里的日志,adb logcat也可以在cmd中打React Native日志

adb logcat -s ReactNativeJS

React Native 日志的tag为ReactNativeJS，这样就可以全部过滤了，结果过程中又发现不支持中文显示，
你特么够了，那只能接着解决

输入 chcp 回车查看当前的编码；
输入chcp 65001 回车；
在窗体上右键选择属性来设置字体为Lucida Consola；
如果想换回原来的编码chcp 936

搜索过程中发现Android 大神 JakeWharton 对logcat封装的工具 pidcat,可以在控制台输出指定应用的日志,非常不错。

20160907

发表于 2016-09-07 |

React Native 里需要接入友盟推送,首先按照官方文档在Android Studio里导入推送Module依赖,然后在MainApplication里添加PushSDK服务，处理通知

 private void initPushSDk() {
    PushAgent mPushAgent = PushAgent.getInstance(getApplicationContext());
    mPushAgent.enable();
    mPushAgent.setNotificationClickHandler(notificationClickHandler);

}

private static final String a = UmengNotificationClickHandler.class.getName();
//友盟通知自定义点击处理
UmengNotificationClickHandler notificationClickHandler = new UmengNotificationClickHandler(){
    @Override
    public void dealWithCustomAction(Context context, UMessage msg) {
        launchApplication(context,msg);//先启动后台应用
        WritableMap params = Arguments.createMap();
        String custom = msg.custom;
        params.putString("custom",custom);
        Log.e("custome",custom);
        ReactContext reactContext = getReactNativeHost().getReactInstanceManager().getCurrentReactContext();
        sendEvent(reactContext, "umeng_notification", params);
    }
};

private void launchApplication(Context context,UMessage msg){
    Intent var3 = context.getPackageManager().getLaunchIntentForPackage(context.getPackageName());
    if(var3 == null) {
        com.umeng.common.message.Log.b(a, "handleMessage(): cannot find app: " + context.getPackageName());
    } else {
        var3.setPackage((String) null);
        var3.addFlags(268435456);
        context.startActivity(var3);
    }
}

private  void sendEvent(ReactContext reactContext,
                              String eventName,
                              @Nullable WritableMap params) {
    reactContext
            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit(eventName, params);
}

React Native 主页面里监听原生里发送的事件,跳转到相应的界面：

componentDidMount() {
    if (Platform.OS === 'android') {
          BackAndroid.addEventListener('hardwareBackPress', () => this.onBackAndroid());
    };
    DeviceEventEmitter.addListener('umeng_notification', (e: Event) => {
      //e为原生传递过来的参数e.custom
    this.navigator.push({
        component: ShowNotificationPage
      });
      });
  }

可能是生命周期的原因,当android回退键退出应用时,只能拉起App却无法跳转到相应的界面,因此我在回退键的事件处理上进行了拦截,让App movebacktostack,而不是让界面销毁掉，相当于Home键的功能。

React Native组件之间通信一般是通过props就可以实现父控件向子控件传值,父控件获取子控件的值.
也可以通过React Native 中的DeviceEventEmitter处理组件之间的监听事件,方式如下：

componentWillUnmount() {  
    this.subscription.remove();
  }

  componentDidMount() {  
    this.subscription = DeviceEventEmitter.addListener('followChanged', () => {
          this.onRefresh()
        });

    this.onRefresh();
  }

  onRefresh() {
        this.reuqestFans(this.props.mid);
  }

其他组件触发事件：

DeviceEventEmitter.emit('followChanged');

20160906

发表于 2016-09-06 |

react native 切换页面过快时出现黄色警告：
```
setState(...): Can only update a mounted or mounting component.
```
黄色警告在release版本中是不会出现的，也不会有其他的衍生错误，暂时可以选择忽略，如果强迫要解决的话可以通过如下方法：
```
componentWillUnmount() {
        this.isUnmount = true;
 }
```
在请求完数据更新数据源之前做判断：
```
if（this.isUnmount）return;
    this.setState({
    data:responseData
})
```
还有一种办法让请求去走redux流程。
页面切换的过程中为了避免每次请求数据，可以通过redux维护的state来保存数据源。

Docker Installation

发表于 2016-09-04 |

安装前提：b4bit centos 7.X,kenel 3.10+
可以通过yum或者curl安装,本次选择yum安装

以root或sudo权限登录linux
确保yum是最新版本
```
$ sudo yum update
```

添加yum repo

vi /etc/yum.repos.d/docker.repo

添加内容：

[dockerrepo]
  name=Docker Repository
baseurl=https://yum.dockerproject.org/repo/main/centos/7/
enabled=1
gpgcheck=1
gpgkey=https://yum.dockerproject.org/gpg

:wq保存退出

安装Docker Package
```
$ sudo yum install docker-engine
```
开启Docker后台驻留程序
```
$ sudo service docker start
```

验证docker是否安装成功

$ sudo docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from hello-world
a8219747be10: Pull complete
91c95931e552: Already exists
hello-world:latest: The image you are pulling has been verified. Important: image verification is a tech preview feature and should not be relied on to provide security.
Digest: sha256:aa03e5d0d5553b4c3473e89c8619cf79df368babd1.7.1cf5daeb82aab55838d
Status: Downloaded newer image for hello-world:latest
Hello from Docker.
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (Assuming it was not already locally available.)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

For more examples and ideas, visit:
 http://docs.docker.com/userguide/

让Docker开机自启动
```
$ sudo chkconfig docker on
```
注册Docker Hub账号 username:jichao password:712534
终端登录
```
$ docker login:
```
搜索仓库：
```
$ docker search centos
```
拉取镜像：
```
$ docker pull centos
```
查看本地有哪些镜像
```
$ docker images
```
使用镜像启动一个容器：
```
$ docker run -t -i centos /bin/bash
```
终止终端,停止容器
```
$ exit|Ctrl+D|$ docker stop
```
终止状态容器查看：
```
$ docker ps -a
```

20160903

发表于 2016-09-03 |

android studio

 Error:Execution failed for task ':app:transformClassesWithDexForDebug'.
 com.android.build.api.transform.TransformException:
com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: 
Process 'command 'C:\Program Files\Java\jdk1.8.0_31\bin\java.exe'' 
finished with non-zero exit value 2

在build.gradle里添加：

defaultConfig {
    multiDexEnabled true
}

ES6

export:

命名导出

export function gank(n){
    return 'hello gank';
}
const carry = 'carry';
export {carry}
//或者直接export const carry = 'carry'

默认导出

export default gank(io){
    return 'hello default';
}

每个文件的export default 只能有一个

import:

以下代码将myDefault，foo，bar导入文件中,myDefault是默认导出的项,foo,bar为命名

导出的项（即my-module.js中的代码为：…;export foo;export bar;export default myDefault;）

import myDefault, {foo, bar} from "my-module.js"

在react native 可能看见如下写法：

import React, {Component} from 'react';