React Native 学习第四天

1.React Native中状态设置StatusBar

<StatusBar
    animated={true} //指定状态栏的变化是否应以动画形式呈现，目前支持：backgroundColor,barStyle和hidden
    hidden={false}  //是否隐藏状态栏
    backgroundColor={'green'}   //状态栏的背景颜色
    translucent={true}          //指定状态栏是否透明，设置为true时，应用会在状态栏之下绘制(即使所谓‘沉浸                                式’--被状态遮住一部分)。常和带有半透明背景色的状态栏搭配使用。
    barStyle={'light-content'}  //enum('default','light-content','dark-content')
/>

StatusBar.currentHeight  : android手机状态的高度

2.定时器

setTimeout()
    触发后，延迟调用一次函数
    this.timer = setTimeout(()=>{
        console.log('只调用一次哦!');
    },500);
setInterval()
    触发后，每隔一段时间函数
    this.timer_interval = setInterval(()=>{
        console.log('每隔500毫秒调用一次!');
    },500);
setImmediate()
    当前JavaScript执行块结束的时候执行，就在将要发送批量响应数据到原生之前。注意如果你在setImmediate的回调
    函数中又执行了setImmediate，它会紧接着立刻执行，而不会在调用之前等待原生代码
    this.time_diate = setImmediate(()=>{
        console.log('调用setImmediate方法');
        this.setState({
            w: this.state.w + 15, h: this.state.h + 15,
    },100);

3.打包

1.把***.keystore文件放到你工程中的android/app文件夹下
2.项目目录/android/gradle.properties(项目配    置，只对所在项目有效)。如果没有gradle.properties
    文件你就自 己创建一个，添加如下的代码：
    MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
    MYAPP_RELEASE_KEY_ALIAS=my-key-alias
    MYAPP_RELEASE_STORE_PASSWORD=*****
    MYAPP_RELEASE_KEY_PASSWORD=*****
3.目录下的android/app/build.gradle,添加如下的签名配置：
    ...
    android {
        ...
        signingConfigs{
            release {
                if(project.hasProperty('MYAPP_RELEASE_STORE_FILE')){
                    storeFile file(MYAPP_RELEASE_STORE_FILE)
                    storePassword MYAPP_RELEASE_STORE_PASSWORD
                    keyAlias MYAPP_RELEASE_STORE_ALIAS
                    keyPassword MYAPP_RELEASE_KEY_PASSWORD
                }
            }
        }
        buildTypes {
            release {
                ...
                signingConfig signingConfig.release
            }
        }
        ...
    }
4.根目录终端中运行以下的命令：
    $ cd android
    $ gradlew assembleRelease           //windows下CMD
    $ ./gradlew assembleRelease         //macOS
5.生成的APK文件位于android/app/build/outputs/apk/app-release.apk

4.MobX

安装mobx：
npm i mobx mobx-react --save
安装mobx相关的包
npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev
安装一些 babel 插件，以支持 ES7 的 decorator 特性(后面有不用的方法， ES6)

然后打开 .babelrc 文件配置 babel 插件：

{
"presets": ["react-native"],
"plugins": [
"syntax-decorators",
"transform-decorators-legacy" ]
}

Mobx是一款十分优秀的状态管理库，不但书写简洁还非常高效，相比较成熟的老大哥redux,mobx较新，所以论成熟度、扩展
性等不如redux,但是mobx基于运行时始终保持最小的数据依赖，所以效率非常高，而且对列表的支持非常好，使起来代码也很少。
*mobx常用的标签：
    @observable:使用此标签监控要检测的数据；
    @observer:使用此标签当数据变化时要更新的Component(组件类);
    @action:使用此标签监控数据改变的自定义方法(当在需要数据改变的时候执行此方法，那么View层也会跟着自动变
            化，默认此View层已经使@Observer标签监控)

image
image