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

2017.2.14

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

[阅读全文]

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
通常也还需要一台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;
  };
  ……
}
[阅读全文]

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

概述

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

[阅读全文]

[实时动态]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-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();被调用之前,启动画面会一直保持在屏幕上,这样你的用户就不会看到难看的白屏了!

[阅读全文]

开源用 React Native 开发的数独游戏
2016-09-04 by neo

项目地址:https://github.com/nihgwu/react-native-sudoku

DEMO

完全用 React Native 实现的一个简单的数独游戏,包括自动生成游戏、保存进度、在线排行榜、编辑模式以及各种动画效果,欢迎 Star 😄

利用 React Native 强大的 Flex 布局,可以很轻松的实现数独的九宫格棋盘,使用 Animated 以及 LayoutAnimation,实现动画效果也很简单,再加上现成的数独算法库,一个简单的数独游戏就出来了。

目前只有一个难度,属于大师级,在线排行的用时记录为 00:03:07,在线排行需要自己本身先有成绩才能看到,数独达人快来挑战吧。

对 React Native 开发应用还有疑虑的可以下载试玩一下,iOS 和 Android 平台共用 100% 的代码

iOS 版下载

iOS

Android 版下载

Android

[阅读全文]