React Native 学习第四天

1.React Native中状态设置StatusBar

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标签监控)
React Native 学习第四天_第1张图片
image

React Native 学习第四天_第2张图片
image

你可能感兴趣的:(React Native 学习第四天)