iOS RN 0.45以上版本所需的第三方编译库(boost等)
2017-07-30 by 晴明

第三方依赖库百度盘链接: http://pan.baidu.com/s/1kVDUAZ9

RN iOS 0.45以上版本开始需要依赖一些第三方编译库,这些库在国内下载都非常困难(一般的翻墙工具都很难下载)
未来RN不同版本可能依赖不同版本的第三方编译库,具体所需库和版本请查看ios-install-third-party.sh文件,注意先把左上角的branch切换到对应的版本
0_1501422473793_branch.png

然后在底部查看所需的依赖库名字和版本
0_1501422599981_version.png

然后去网盘里下载↓

第三方依赖库百度盘链接: http://pan.baidu.com/s/1kVDUAZ9

下下来后请放置到

~/.rncache

目录

比如你可以打开终端,输入

# 井号表示注释,不要复制井号开头的句子

# 进入~目录,即用户目录
cd ~   

# 创建目录,如果已经存在就不用创建了
mkdir .rncache

# 复制文件
cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/ 

全部复制完成后,就可以开始init新的RN项目

[阅读全文]

用 jpush-react-native 插件快速集成推送功能(Android 篇)
2017-02-27 by KenChoi

概述

jpush-react-native 是极光推送官方开发的 React Native 版本插件,可以快速集成推送功能(Github 项目中包含了 example,文中提到的 demo 来源于此)。现在最新版本的 JPush SDK 分离了 JPush 及 JCore,让开发者可以分开集成 JMessage 及 JPush(以前 JMessage 包含了 JPush)。下面就来具体说一下如何快速集成以及使用 jpush-react-native 插件。

安装

npm install jpush-react-native --save
npm install jcore-react-native --save ## jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native

配置

配置包括两个步骤,自动配置和手动操作。

一、自动配置部分(以下命令均在你的 React Native Project 目录下运行,自动配置后仍需手动配置一部分)

  • 执行脚本
npm run configureJPush <yourAppKey> <yourModuleName>
//module name 指的是你 Android 项目中的模块名字(对 iOS 没有影响,不填写的话默认值为 app,会影响到查找 AndroidManifest 问题,
//如果没找到 AndroidManifest,则需要手动修改,参考下面的 AndroidManifest 配置相关说明)
//举个例子:
npm run configureJPush d4ee2375846bc30fa51334f5 app
  • Link 项目
//执行自动配置脚本后再执行 link 操作
react-native link

二、手动操作部分 (3个步骤)

  • 第一步:修改 app 下的 build.gradle 配置:

your react native project/android/app/build.gradle

android {
    defaultConfig {
        applicationId "yourApplicationId"
        ...
        manifestPlaceholders = [
                JPUSH_APPKEY: "yourAppKey", //在此替换你的APPKey
                APP_CHANNEL: "developer-default"    //应用渠道号
        ]
    }
}
...
dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile project(':jpush-react-native')  // 添加 jpush 依赖
    compile project(':jcore-react-native')  // 添加 jcore 依赖
    compile "com.facebook.react:react-native:+"  // From node_modules
}

将此处的 yourApplicationId 替换为你的项目的包名;yourAppKey 替换成你在官网上申请的应用的 AppKey。

  • 第二步:检查是否导入以下配置项:

i. 检查一下 dependencies 中有没有添加 jpush-react-native 及 jcore-react-native 这两个依赖。

your react native project/android/app/build.gradle

...
dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile project(':jpush-react-native')  // 添加 jpush 依赖
    compile project(':jcore-react-native')  // 添加 jcore 依赖
    compile "com.facebook.react:react-native:+"  // From node_modules
}

ii. 检查 android 项目下的 settings.gradle 配置有没有包含以下内容:

settings.gradle

include ':app', ':jpush-react-native', ':jcore-react-native'
project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')
project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')

iii. 检查一下 app 下的 AndroidManifest 配置,有没有增加 <meta-data> 部分。

your react native project/android/app/AndroidManifest.xml

    <application
        ...
        <!-- Required . Enable it you can get statistics data with channel -->
        <meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>
        <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>

    </application>

iiii. 现在重新 sync 一下项目(点击 Android Studio sync 按钮),应该能看到 jpush-react-native 以及 jcore-react-native 作为 android Library 项目导进来了。

  • 第三步:加入 JPushPackage (找到 app 下的 MainApplication.java):

app/src.../MainApplication.java

    private boolean SHUTDOWN_TOAST = false;
    private boolean SHUTDOWN_LOG = false;

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }


        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    //加入 JPushPackage
                    new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
            );
        }
    };

上面 JPushPackage 的两个参数是 bool 类型的,第一个参数设置为 true 表示关闭 toast 提示,第二个设置为 true 表示关闭日志打印,建议在 debug 版本中打开。然后在 MainActivity 中加入一些初始化代码即可:

app/src.../MainActivity.java

public class MainActivity extends ReactActivity {    
    ...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        JPushInterface.init(this);
    }

    @Override
    protected void onPause() {
        super.onPause();
        JPushInterface.onPause(this);
    }

    @Override
    protected void onResume() {
        super.onResume();
        JPushInterface.onResume(this);
    }
}

这样就完成了所有的配置。接下来就可以在 JS 中调用插件提供的 API 了。

使用

收到推送

添加了此事件后,在收到推送时将会触发此事件。

需要注意的是,v1.6.6 版本以后,增加了 notifyJSDidLoad 方法,在监听所有相关事件之前要调用此方法,否则不会收到点击通知事件

example/react-native-android/push_activity.js

...
import JPushModule from 'jpush-react-native';
...
export default class PushActivity extends React.Component {
    componentDidMount() {
        // 在收到点击事件之前调用此接口
        JPushModule.notifyJSDidLoad((resultCode) => {
            if (resultCode === 0) {
            }
        });
        JPushModule.addReceiveNotificationListener((map) => {
            console.log("alertContent: " + map.alertContent);
            console.log("extras: " + map.extras);
            // var extra = JSON.parse(map.extras);
            // console.log(extra.key + ": " + extra.value);
        });
}
点击通知

在用户点击通知后,将会触发此事件。

...
componentDidMount() {
    JPushModule.addReceiveOpenNotificationListener((map) => {
            console.log("Opening notification!");
            console.log("map.extra: " + map.key);
        });
}

高级应用

点击通知跳转到指定界面,需要在 Native 中声明一个 Activity,如 demo 中的 SecondActivity,而 SecondActivity 的界面仍然用 JS 来渲染。只需要改动一下 SecondActivity,让它继承自 ReactActivity 即可:

example/android/app/src.../SecondActivity.java

public class SecondActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "SecondActivity";
    }

}

声明完成后,需要在 AndroidManifest 中声明一下(必要的时候可以声明 Activity 的启动模式,以更好地适配自己的需求)。

AndroidManifest.xml

...
<application>
    ...
    <activity android:name=".SecondActivity"/>
</application>

然后使用 SecondActivity 中返回的字符串 “SecondActivity” 注册一个 Component 即可:

example/react-native-android/second.js

import React from 'react';
import ReactNative from 'react-native';

const {
  AppRegistry,
  Text,
} = ReactNative;


export default class second extends React.Component { 
    constructor(props) { 
        super(props); 
    } 

    render() { 
      return (
        <Text> Welcome ! </Text>   
      );
    } 
}

AppRegistry.registerComponent('SecondActivity', () => second);

最后监听点击通知事件,并完成跳转:

JPushModule.addReceiveOpenNotificationListener((map) => {
    console.log("Opening notification!");
    console.log("map.extra: " + map.extras);
    JPushModule.jumpToPushActivity("SecondActivity");
});

这样就完成了用户点击通知后的自定义跳转界面。

接收自定义消息

在用户收到自定义消息后触发。

example/react-native-android/push_activity.js

 ...
    componentDidMount() {
        JPushModule.addReceiveCustomMsgListener((map) => {
            this.setState({
                pushMsg: map.message
            });
            console.log("extras: " + map.extras);
        });
...

得到 RegistrationId

用户注册成功后(一般在用户启动应用后),如果订阅了这个事件,将会收到这个 registrationId。

...
    componentDidMount() {
        JPushModule.addGetRegistrationIdListener((registrationId) => {
            console.log("Device register succeed, registrationId " + registrationId);
        });
    }
清除所有通知

建议在用户退出前台后调用。

    ...
    componentWillUnmount() {
        console.log("Will clear all notifications");
        JPushModule.clearAllNotifications();
    }
设置标签

example/react-native-android/set_activity.js

    ...
    setTag() {
        if (this.state.tag !== undefined) {
            /*
            * 请注意这个接口要传一个数组过去,这里只是个简单的示范
            */      
            JPushModule.setTags(["VIP", "NOTVIP"], () => {
                console.log("Set tag succeed");
            }, () => {
                console.log("Set tag failed");
            });
        }
    }
设置别名
    ...
    setAlias() {
        if (this.state.alias !== undefined) {
            JPushModule.setAlias(this.state.alias, () => {
                console.log("Set alias succeed");
            }, () => {
                console.log("Set alias failed");
            });
        }
    }

以上就是插件提供的主要接口的示例。总的来说,配置和使用都比较简单,适合开发者快速集成推送功能。

[阅读全文]

2017最新发布到App Store上架流程—详细图文
2017-03-16 by qtb000

0_1495769315415_11.png

如果你是新手,将在这里清晰发布到App Store整个上架流程,还有相应的流程解决方案。
0_1495769243898_间隔.png
如果你上架过iOS APP,这里会了解到有更快捷的上架过程。
0_1495769243898_间隔.png
上架iOS最基本需要一个付费的开发者账号,还没有的话申请一个或者借用。
0_1495769243898_间隔.png
如果只是安装到自己测试,现在有个新技术用普通的苹果id就能申请ios证书进行真机调试了。
0_1495769243898_间隔.png
免开发者账号申请ios证书真机调试介绍
0_1495769243898_间隔.png

ios上架通常也还需要一台Mac电脑,不过这里介绍到不用Mac在Windows系统中直接发布iOS APP到App Store。

0_1495769243898_间隔.png
如果没有Mac,也无所谓。
0_1495769243898_间隔.png
申请开发者账号介绍
0_1495769243898_间隔.png
iOS APP上架需要创建一个APP ID、申请iOS发布证书、再用iOS证书打包IPA,然后在上传IPA到App Store
0_1495769243898_间隔.png

上架过程分七个步骤,按步骤一步步来,清晰了步骤就跟简单了,欢迎交流!

0_1495769243898_间隔.png

1、创建APP身份证(App IDs)

2、申请发布证书

3、申请发布描述文件

4、使用iOS证书编译打包IPA

5、在iTunes Connect创建App

6、Windows下上传IPA到App Store

7、上传好IPA回到iTunes Connect填写APP信息并提交审核

0_1495769243898_间隔.png

一、创建唯一标示符App IDs
0_1495769243898_间隔.png

APP IDs在后面创建发布文件,创建APP时都要用到。

首先打开开发者中心https://developer.apple.com/cn/,进入证书页面。

0_1495769243898_间隔.png
1.1点击证书、ID及配件文件,进入设置。
0_1495769243898_间隔.png
0_1495769165257_1.1.png

1.2选择App IDs –>点击+创建一个新的App ID
0_1495769243898_间隔.png

其中有两项需要你自己填:

第一项Name,用来描述你的App ID,这个随便填,没有什么限制,最好是项目名称,这样方便自己辨识(不允许中文)

第二项Bundle ID (App ID Suffix),这是你App ID的后缀,需要仔细填写。用来标示我们的 app,使它有一个固定的身份,和你的程序直接相关。填写 Explicit App ID 的格式为:com.company.appName,一定照着格式写,写个方便记的,后面很多地方要用到。

第三项App Services,默认会选择2项,不能修改,其它根据自己需要的服务选择上,然后点击Continue确认,下一步。

1_1495769156479_1.3.png 0_1495769156479_1.2.png
0_1495769243898_间隔.png
检查下没有错的话直接点击Register后点击Done完成App ID的创建。
0_1495769243898_间隔.png
0_1495769142657_1.4.png

二、申请发布证书
0_1495769243898_间隔.png
iOS证书申请要用到一个工具Appuploader,在win系统中辅助快速申请iOS证书,和后面上传IPA到App Store都要用到。
0_1495769243898_间隔.png
先安装好 Appuploader安装教程
0_1495769243898_间隔.png
2.1打开程序,输入苹果开发者中心账号,登录。
0_1495769243898_间隔.png
0_1495769125681_2.1.png
0_1495769243898_间隔.png
2.2选择Certification
0_1495769243898_间隔.png
0_1495769115558_2.2.png
0_1495769243898_间隔.png
2.3点击+ADD,这里有开发证书等等创建选项,这里选第三项发布证书。
0_1495769243898_间隔.png
0_1495769102737_2.3.png
0_1495769243898_间隔.png
2.4输入,证书名称(随意) 邮箱(任何邮箱都行) 密码(后面打包编译时用到)然后点击ok
0_1495769243898_间隔.png
0_1495769091400_2.4.png
0_1495769243898_间隔.png
2.5此时生成了好了一个发布证书,点击p12 File,下载证书文件,保存到电脑。
0_1495769243898_间隔.png
0_1495769079731_2.5.png

这样发布证书就创建好了。
0_1495769243898_间隔.png

三、申请发布描述文件
0_1495769243898_间隔.png

3.1回到软件点击Profiles
0_1495769243898_间隔.png
0_1495769068038_3.1.png
0_1495769243898_间隔.png
3.2点击+ADD,这里有开发描述文件等等选项,这里选发布描述文件。
0_1495769243898_间隔.png
0_1495769049038_3.2.png
0_1495769243898_间隔.png
3.3选择APP IDs,之前在开发者中心创建的,这里会自动出现。
0_1495769243898_间隔.png
0_1495769041573_3.3.png
0_1495769243898_间隔.png

3.4勾选刚创建的发布证书关联好,输入name,点击ok
0_1495769243898_间隔.png

0_1495769033401_3.4.png
0_1495769243898_间隔.png

3.5此时生成了发布描述文件,点击 Download下载到电脑保存

0_1495769025141_3.5.png
0_1495769243898_间隔.png

四、上传证书编译打包iOS

0_1495769243898_间隔.png

楼主做了几个开发工具的打包教程、可以参考下

xcode打包教程

HBuilder打包教程

APICloud打包教程

phonegap打包教程

0_1495769243898_间隔.png
这里以APPcan平台为例

0_1495769243898_间隔.png
4.1、选择完工的APP,点击应用打包,选择证书管理,iOS发布证书,上传之前申请的发布证书和申请时设置的密码及发布描述文件

点击检验,APP ids将自动出现,然后保存。

0_1495769243898_间隔.png
0_1495769009930_5.1.png
0_1495769243898_间隔.png
4.2选择云端打包,iOS打包,没有推送证书就不勾选支持推送,选择发布版证书,禁用http请求容易审核通过。
0_1495769243898_间隔.png
设置好版本号,选择appcan服务器,点击生成安装包。
0_1495769243898_间隔.png
1_1495768998277_5.3.png 0_1495768998277_5.2.png
0_1495769243898_间隔.png
4.3安装包生成成功后,下载保存到电脑,这个ipa包就可以上传到App Store了
0_1495769243898_间隔.png
0_1495768978829_5.4.png
0_1495769243898_间隔.png
五、在iTunes Connect创建App
0_1495769243898_间隔.png

5.1回到软件,点击ItunerConnect,进入iTunes Connect进入创建APP。
0_1495769243898_间隔.png

0_1495768963283_4.1.png
0_1495769243898_间隔.png

5.2选择我的APP点击左上角+号选择新建APP,输入你的应用名称,语言,套装ID,之前在开发者中心创建的对应APP IDs

(与创建iOS证书所选的appid要一致,这样用iOS证书打包的IPA,上传就能关联到了)

sku不能写中文,点击创建。
0_1495769243898_间隔.png
0_1495767942877_4.1.png

0_1495769243898_间隔.png
5.3这里提示要用到Xcode或者Application loader提交IPA,等下用Appuploader直接在Windows环境下上传ipa,不用Mac了。

现在APP各项信息都没填写,等下把IPA上传成功了再填写。

这里构建版本旁边还没有出现+号,后面上传了IPA就会出现,等下会用到。
0_1495769243898_间隔.png

0_1495768860246_4.5.png
0_1495769243898_间隔.png

六、Windows环境下上传IPA到App Store

0_1495769243898_间隔.png
6.1打开Appuploader程序,点击Upload.

0_1495768843604_6.1.png
0_1495769243898_间隔.png
6.2选择刚生成的iap包
0_1495769243898_间隔.png
0_1495768836696_6.2.png
0_1495769243898_间隔.png
6.3Appuploader将自动上传你的IPA,当出现以下提示时,说明上传成功,点击deail可以查看APP信息。
0_1495769243898_间隔.png
0_1495768829313_6.3.png
0_1495769243898_间隔.png
七、回到iTunes Connect提交审核

0_1495769243898_间隔.png
7.1上传好了IPA,然后回到iTunes Connect,进入填写信息的页面,下边有一个构建版本的选项,之前这旁边没有+号的,如果上传成功了,过几分钟旁边会出现一个加号按钮,点击一下+然后会出现你刚上传的APP,点击完成即可。
0_1495769243898_间隔.png
注意:如果一段时间后没有出现+号,可能ipa不符合要求,会有个反馈邮件过来,根据反馈的问题修改后重新上传。
0_1495769243898_间隔.png
0_1495768819259_7.1.jpg
0_1495769243898_间隔.png
7.2然后设置好APP相关的信息,截图、类别,价格、销售服务等。
0_1495769243898_间隔.png
0_1495767824373_7.1.jpg
0_1495769243898_间隔.png
7.2设置好相应的APP信息后,点击提交以供审核。
0_1495769243898_间隔.png
0_1495768804184_7.2.png
0_1495769243898_间隔.png
7.3提交审核回到我的APP查看会提示正在等待审核,审核要几天时间,常登陆看看审核情况

如果变成可供销售,恭喜你~上架成功了,如果显示被拒绝,点击查看问题,根据反馈修改再重新上传。
0_1495769243898_间隔.png
0_1495768797229_7.3.png

[阅读全文]

听晴明老师从头讲React Native
2017-04-28 by 三十

0_1493305849286_banner-01.png

死活都要赶在五一前更新个状态/傲娇脸!
五一大家都干嘛呢,虽然是休假但也要保持学习呀。

我们3月份的时候已经发布了晴明老师精心录播的系列课程,前两天我们又拓宽了发布渠道,同学们现在可以通过腾讯课程和网易云课堂两个平台,看到我们的这个课程。点击下方图片开始选择一个平台学习吧 >>

0_1493302453385_腾讯课堂链接.png

0_1493302442976_网易云课堂链接.png

[阅读全文]

2017年4月22日React Native中文网在NJSD2017大会上的分享
2017-04-24 by 晴明

主题:React Native的傻瓜式优化

时间:2017年4月22日

地点:南京国际博览会议中心

视频:待主办方公开

PPT:https://pan.baidu.com/s/1hsywyOW

[阅读全文]

React/React Native 的ES5 ES6写法对照表
2015-11-20 by tdzl2003

很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做。今天在此整理了一些ES5和ES6的写法对照表,希望大家以后读到ES5的代码,也能通过对照,在ES6下实现相同的功能。

[阅读全文]

安卓Back键的处理·基本+高级篇
2016-03-01 by tdzl2003

基本用法

根据文档,安卓back键的处理主要就是一个事件监听:

BackAndroid.addEventListener('hardwareBackPress', this.onBackPressed);
BackAndroid.removeEventListener('hardwareBackPress', this.onBackPressed);

starter-kit里,我们在App这一级别,实现了按back键回退导航栈的功能:

class App extends React.Component {
  componentWillMount() {
    if (Platform.OS === 'android') {
      BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }
  componentWillUnmount() {
    if (Platform.OS === 'android') {
      BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }
  onBackAndroid = () => {
    const nav = this.navigator;
    const routers = nav.getCurrentRoutes();
    if (routers.length > 1) {
      nav.pop();
      return true;
    }
    return false;
  };
  ……
}
[阅读全文]

[实时动态]3.8日苹果警告邮件事件
2017-03-08 by tdzl2003

目前的反馈

目前较多反馈同时使用了RN 和 crash 收集统计插件的开发者更多的收到了此邮件。

大部分RN开发者表示暂未收到此邮件。

今天有多个使用RN开发的应用通过审核,包括使用了热更新功能的,暂未接到反馈有因为使用RN而被拒审的案例。

目前有未收到邮件的应用发布了热更新,暂未受到警告。

该做什么

如果您没收到对应的警告邮件,那可以先安心吃瓜,不必过于警惕。

如果您已经收到了对应的邮件,请首先排查第三方库,尤其是涉及统计分析、crash收集、以及性能分析的插件。

暂时避免或减少涉及功能变更的热更新。

禁止通过热更新彻底改变应用功能和应用目的。这是明确违反苹果开发者协议的。

[阅读全文]

新手理解Navigator的教程
2015-11-20 by mozillo

注意!从RN 0.43版本开始,官方将停止维护Navigator,建议大家迁移到新的react-navigation库(文档地址需翻墙)。新的导航库无论从性能还是易用性上都要大大好于老的Navigator!

下面是一个简单的例子,用Navigator来跳转页面,页面之间传递参数 (代码是ES6语法写的):

        
    import React from 'react';
    import {
        View,
        Navigator
    } from 'react-native';
    import FirstPageComponent from './FirstPageComponent';
    
    export default class SampleComponent extends React.Component {
        render() {
            let defaultName = 'FirstPageComponent';
            let defaultComponent = FirstPageComponent;
            return (
            <Navigator
              initialRoute={{ name: defaultName, component: defaultComponent }}
              configureScene={(route) => {
                return Navigator.SceneConfigs.VerticalDownSwipeJump;
              }}
              renderScene={(route, navigator) => {
                let Component = route.component;
                return <Component {...route.params} navigator={navigator} />
              }} />
            );
        }
    } 
[阅读全文]

React Native 0.32以下版本Xcode8报错解决办法
2016-09-20 by tdzl2003

RCTSRWebSocket.m报错

Ignoring return value of function declared with warn_unused_result attribute

这个报错在此文件中有两处,代码

SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);

修改为

(void)SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);

前面加上(void)

RCTScrollView.m 报错

Use of undeclared identifier '_refreshControl'; did you mean 'refreshControl'?

@implementation RCTCustomScrollView
{
  __weak UIView *_dockedHeaderView;
  RCTRefreshControl *_refreshControl;  // 加入此行
}
[阅读全文]

1月22日直播:天地之灵——案例开讲Mobx
2017-01-15 by tdzl2003

我们不要用我们搞不懂的技术框架

是不是在15年听老前辈们洗脑说redux是唯一的选择,结果到最后换来的却是从入门到放弃?快来入坑mobx吧~
本次直播,天地之灵老师会就两个框架的优缺点进行一定程度的对比,帮助您在项目中更好的选择合适的框架。

可能是2016年国内用mobx做过最多不同项目的人

天地之灵所带领的团队,在2016年初就逐步停用了redux,经过一段时间的尝试之后(可能部分群友们对我们当时推荐的Async + Subscribe还有印象),我们选定了mobx作为我们下一代的数据框架。
到目前为止,天地之灵的团队已经将mobx应用在了5个不同的网站项目、3个不同的App项目中,面对了管理后台、电商、工具、社交、新闻等多种不同类型的项目,对基于mobx的数据业务层搭建积累了丰富的经验。

不仅仅是数据框架

mobx的模型不仅仅可以用于项目的数据业务层,还可以在视图层发挥很多的价值。
Why? How? 且听天地之灵老师周日分享讲解几个典型场景。

你以为这样就搞懂mobx了?

掌握一个框架,不仅仅是掌握它的使用,我们还要对它的内部运作机理有一定的了解,这样,我们才可以在使用的时候更少的遇到问题。
周日我们会在简单讲解mobx运行原理的基础之上,关注如何避免写出“坑”的代码,以及如何提高代码的性能。让你不仅仅是会用,更能写出健壮的代码。

1月22日周日晚20:00 - 22:00,由天地之灵老师通过案例深入讲解mobx的使用,欢迎大家收看。

直播地址(已结束):斗鱼http://www.douyu.com/tdzl/
优酷录播:http://v.youku.com/v_show/id_XMjQ4NTA4OTUwOA==.html

0_1484624108494_1.22直播群-01.jpg

[阅读全文]

React Native中文网开直播啦!
2017-01-24 by 三十

2017.2.14

各位情人节快乐!😜
情人节没有什么好送大家的,来段视频给大家解解闷呗😆
2017.2.12:「React Native优化技巧分享」

[阅读全文]

React Native安卓端的一些注意事项
2017-01-12 by erhutime

React-native for Android:

标签: react-native

[阅读全文]

新年小目标:晴明老师教你用ReactNative清空购物车!1月15日直播
2017-01-10 by 晴明

直播已结束,感谢大家捧场,欢迎批评指正。

视频:
优酷录播
百度云盘下载

源代码:
https://github.com/sunnylqm/ShopCartDemo

下期直播预告:
http://bbs.reactnative.cn/topic/3337/
咱们下周同一时间(1月22日周日晚八点),由天地之灵老师通过案例深入讲解mobx的使用,欢迎大家同一时间收看。我们在接下来的一周也会对相关的问题进行收集,请大家关注本帖和QQ群的相关通知

[阅读全文]

在Windows下搭建React Native Android开发环境
2015-11-20 by tdzl2003

推荐新手们先看一下环境搭建的视频教程

[阅读全文]

苹果从17年元旦开始强制要求HTTPS?!官方表示你们误会了
2016-09-20 by 晴明

长期以来流传一则消息,苹果将于17年1月1日收紧ats政策,强制接口使用HTTPS协议。依据据说是6月14日开发者大会上的演讲。

但是苹果真的这么激进吗?苹果开发者论坛里一名官方人员近日对此进行了澄清:

[阅读全文]

ReactNative安卓首屏白屏优化
2016-04-07 by cnsnake11

问题描述

公司现有app中部分模块使用reactnative开发,在实施的过程中,rn良好的兼容性,极佳的加载、动画性能,提升了我们的开发、测试效率,提升了用户体验。

但是,在android中,当点击某个rn模块的入口按钮,弹出rn的activity到rn的页面展现出来的过程中,会有很明显的白屏现象,不同的机型不同(cpu好的白屏时间短),大概1s到2s的时间。

注意,只有在真机上才会有此现象,在模拟器上没有此现象完全是秒开。ios上也是秒开,测试的最低版本是ios7,iphone4s。

reactnative版本0.20.0。

jsbundle文件大小717kb。

[阅读全文]

RN npm插件制作发布流程以及新轮子——react-native-zkbanner 轮播组件
2016-09-18 by 正凯

npm是一个node包管理和分发工具,已经成为了非官方的发布node模块(包)的标准。通过npm可以很快的找到特定服务要使用的包,进行下载、安装以及管理已经安装的包。
本文将就如何发布npm包进行一个详细的介绍以及将之前封装的react-native-zkbanner作为例子进行发布。

[阅读全文]

React Native原生UI封装以及事件处理
2016-09-06 by 正凯

对于目前的移动端原生开发来说,想要完成一个app的开发工作是比较容易的,因为原生代码在网上所提供出来的各种开源的第三方组件已经成千上万了,足以支撑起你的业务需求。但是如果我们想要在React Native上使用第三方组件怎么办?

众所周知,React Native自身框架也提供了一部分基础组件,已经可以基本满足我们的开发需求,但是,当我们需要使用第三方接口的时候该如何?目前市面上基本所有的第三方组件接口都还不提供对React Native的支持,所以,需要使用第三方的时候,还得我们自己来封装处理。

接下来,我们一步一步来封装友盟分享的组件。

[阅读全文]

iOS启动闪白屏问题完美解决方案:react-native-launch-image
2016-08-12 by tdzl2003

由于RN首次启动的时候,需要加载整个bundle,再render出首页面,这个过程通常需要耗费总计几百毫秒到一两秒不等。在默认工程中,这个过程中给用户展示出的都是白色的背景,因此用户会感觉到屏幕有一小段时间的白屏,从而影响用户体验。

为了解决这个问题,我们寻找了一些方法,最后推出了这个开源组件

安装

如果你之前没有用过rnpm,请先安装rnpm

npm install rnpm -g

在你的工程下运行命令,安装并连接react-native-launch-image模块

npm install react-native-launch-image
rnpm link react-native-launch-image

然后修改你的AppDelegate.m


#import "AppDelegate.h"

#import "RCTRootView.h"
#import "RNLaunchImage.h"  // <-- 加入这一行

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code
    
    [RNLaunchImage wait];   // <-- 加入这一行。这必须是这个方法return之前的最后一行
    return YES;
}

@end

这样,你的启动画面就会一直保持,直到你主动将它关闭。通常我们这么写:

import * as launchImage from 'react-native-launch-image';

class App extends React.Component {
    async componentDidMount(){
        // 随便做点什么,包括可以用await去做异步调用。
        launchImage.hide();
    }
}

直到launchImage.hide();被调用之前,启动画面会一直保持在屏幕上,这样你的用户就不会看到难看的白屏了!

[阅读全文]