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

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

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

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

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

[阅读全文]

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://test.baidu.com/qss/710d/188468.html##survey-navigation),说说你对mobx的疑惑或看法。

0_1484624108494_1.22直播群-01.jpg

[阅读全文]

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

React-native for Android:

标签: react-native

[阅读全文]

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

这是一个简单的例子,用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;  // 加入此行
}
[阅读全文]

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

推荐新手们先看一下环境搭建的视频教程,虽然视频中是mac系统,但同时讲到了所有windows中需要注意的地方。

[阅读全文]

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

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

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

[阅读全文]

安卓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;
  };
  ……
}
[阅读全文]

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

[阅读全文]

React Native在windows下不能reload的解决方案
2016-08-23 by sunnylqm

大概从react native 0.29版本之后,最近的几个版本在windows下都会碰到无法reload的情况。
官方一直不太关注windows问题,只在一些回复帖子中给出了一个解决方案。这里我整理如下:

1、下载watchman for windows的测试版 -> https://ci.appveyor.com/api/buildjobs/kravw77nw7fqhvio/artifacts/watchman.zip

2、下载下来后找个妥当的位置解压(不建议解压到桌面,免得你那天顺手不顺手给清理了)

3、在系统变量PATH中加入你刚才解压的目录路径
0_1471940224300_Screen Shot 2016-08-23 at 16.16.19.png

4、关闭现有所有CMD窗口,重新启动packager再试试

由于watchman for windows目前仍然还是测试版,所以不能保证这个方案一定能解决reload的问题,但先试试吧!

[阅读全文]

用RN( ListView + Navigator ) + Redux来开发一个ToDoList
2015-11-21 by mozillo

教程说明

  1. 如何初始化一个redux Store
  2. 如何使用action+reducer来管理state
  3. 如何在react-native里更新ui
  4. 这个例子可能不是很具体,但是对于理解用法比较好(目前看到的例子都是counter)
[阅读全文]

对组件的引用(refs)
2016-03-17 by tdzl2003

构建完你的组件之后,你可能会想要去寻求一个办法,来直接调用你在render()返回的组件的实例的方法。在大部分情况下,这应该不是必须的,因为在响应式数据流中,你要输出一些数据,你应该在render()中给子组件传递最新的属性。不过,在某些特殊情况下,直接操作组件实例的方法还是必要或者有利的。所以React提供了一个打破限制的办法,这就是refsrefs(reference,引用)在以下时候特别有用:当你需要直接操作一个组件渲染的DOM标记(譬如要调整它的绝对位置),或者在一个大型的非React应用中使用一个React组件,或者是把你已有的代码库在React中复用。

让我们来看看怎么获取一个ref,并尝试深入处理一个复杂的例子。

[阅读全文]

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下实现相同的功能。

[阅读全文]

【青岛】OSC源创会带你聊聊基于react-native的移动应用开发
2016-06-30 by 开源中国

七月的青岛,OSC源创会的脚步也将来到这座美丽浪漫的城市,在延长海岸漫步,吹吹海风,三五基友线下约起,配上一杯啤酒,一切都惬意美好的不像话。我们一如既往秉承着“自由,开放,分享”的思想,诚邀各位oscer们前来赴约。

本期主题有:

1.Mysql精细化运营与按需优化

内容简介:10w+级别的线上mysql服务的精细化运营,以及稳定和性能优化取舍

分享嘉宾:杨繁, 就职于腾讯云存储产品中心,担任存储研发二组技术负责人,从事mysql等开发和优化。

2.CSS 伪类和伪元素的 N 种用法

内容简介:CSS 的伪类和伪元素在 Bootstrap 等现代前端框架中被大量使用。掌握伪类和伪元素的基本概念已是必备技能,即便如此,总有些意想不到的的用法让人眼前一亮。在该话题中,为你准备了 N 种使用伪类和伪元素的方法。

分享嘉宾:孙浩,ZUI HTML5跨屏框架(http://zui.sexy)作者,前端架构师,全栈工程师,主持了易软天创旗下禅道项目、然之协同、蝉知建站等几款产品的前端架构改革。

3.基于 Kubernetes 的模板化应用编排

内容简介:Kubernetes是原生为生产环境而设计的容器编排系统,融入了Google多年以来设计实现云原生应用的经验。模板化应用编排,为企业重用解决方案,快速部署SaaS服务提供了技术支持。

分享嘉宾:王昕,轻元科技首席架构师

4.基于react-native的移动应用开发

内容简介:react-native作为移动应用开发的一种革命性的尝试,已经被国内外很多公司使用。本次分享主要介绍基于react-native的移动应用技术架构,以及开发实践。

分享嘉宾:丁周芳(凡竹),系统架构师,全栈工程师, 现就职于浪潮国际,负责汽车金融产品的技术架构与研发。

精彩的主题分享,多样的OSC奖品,还有精美的下午茶歇,统统都在青岛站源创会等你哦~

报名地址请戳:http://city.oschina.net/qingdao/event/2185476

[阅读全文]

React Native中文网官方发布完整新项目包(无需init)
2015-11-20 by tdzl2003

当前react native的新项目创建过程相对早期已经顺利很多,故本帖将不再更新

本贴提供完整的React Native各版本的绿色纯净新项目包。
完整打包第三方依赖,只要环境配置正确,无需科学上网漫长等待,解压后即可直接运行。

[阅读全文]

在React Native中使用ART
2016-01-28 by magicismight

前半个月捣腾了一下React Native ART
现在手上闲下来了和大家分享一下React Native中的ART使用心得

React Native ART 究竟是什么?

所谓ART,是一个在React中绘制矢量图形的JS类库。这个类库抽象了一系统的通用接口,统一了SVG,canvas,VML这类矢量图形在React中的书写格式。你可以通过ART将SVG,canvas,VML的矢量图形拿到React中使用,也可以把ART反转回去。(虽然有很多局限性,后面会讲到)
React Native ART 是react-art在React Native中的移植版,接口几乎完全一致,
React Native中的ART很早之前就已经开源了iOS版,最近又在0.18.0中开源了Android版本
因为缺少官方文档,一直不为人所知。

为什么要在React Native中使用 ART?

我在前端页面切片的时候比较喜欢用SVG,有条件我都尽量让设计师出AI的设计稿或者把图标导成SVG的
因为SVG和图片相比,优点太多太多:可以代码复用,可以无损放大,通过合理导出的svg代码比同等压缩过的图片文件大小要小很多,而且svg代码还可以通过gzip压缩
最近在做一个原生内嵌的React Native项目,设计师是按照原生APP的标准把每个图标切了3个尺寸给我,感谢React Native中强大的打包工具,可以很方便的使用这写图标。所以项目开始也没想着要用SVG(当时android的ART还没开源,这也是一个重要因素)。
在整个项目完成之后,看了一下,所有图片在经过压缩之后加起来有200多K,大小还可以接受。
但是在项目后期优化过程中,发现一个使用图片图标非常致命的问题:

<Image />元素在iOS下不是同步渲染的,即使是使用的本地图片资源!
更过分的是具有相同source的多个Image也不能在同一帧里面渲染出来的,如下的5个图标,在iOS下它们不会同时被渲染出来,这样造成的影响是在打开一个列表的时候,看见这些图标一个接一个无序的跳出来,这个效果如果在iphone4s,5s下看相当的明显,很恶心,完全不能忍受!想过各种方法也没办法绕过去。
0_1453948316450_upload-02d66234-742f-4272-ac8e-11b87cfbee64

首屏的如下几个图标以及返回按钮和logo,还有TabBar里面的图标在iOS下都是在界面出现的若干帧之后再无序的跳出来,这样的效果很不好,一点都没有原生APP的感觉,有一种hybird的既视感。
0_1453945350760_icons.png
0_1453946171360_upload-3df0c88a-2f35-4e7a-a076-e822afed6325

后来等到了0.18.0,Android的ART对外开源了,我想到为什么不用SVG图标尝试一下呢?
然后让设计师把这个图标:
0_1453949196676_upload-f3a4ad35-8bf5-4f67-b74e-5caa5415057f
重新切成SVG给我,然后再把SVG转成ART。
在iOS下完美渲染!所有图标和界面文字一起出现,不管是放5个还是100个。而且对界面的整体渲染速度也没有任何能感知到的影响。
在安卓下也是同样的完美,而且生成的ART代码要比图片小了很多。

[阅读全文]