上辈子作恶多端，这辈子写前端。

一款纯React Native原生代码 和 微信小程序 编写的appReact Native源码地址：https://github.com/azhon/Time微信小程序源码地址：https://github.com/azhon/Time/tree/WeChatApp在微信中进入小程序搜索 直接搜索阿钟程序猿或者扫描下方二维码动态效果图看这里微信小程序效果图：　　 　　React Native效果

本人基于ReactNative v0.48 Xcode v8.3.3 开发执行如下命令是可以正常运行到Android模拟器上的，但是运行在ios设备上就出现了错误 react-native init HelloWorld cd HelloWorld react-native run-android使用Xcode打开ios项目编译报出如下错误：解决方案：下载boost_1_63_

React Native 一个跨平台开发的语言！一套代码可以同时跑在多个端，想想都刺激；下面就来用RN开发一个登录页面，熟悉语法和RN代码的编写（大神可以出门右拐）    来看下我们要实现的效果图：         React Native 中文网：http://reactnative.cn/docs/0.48/getting-started.html 在这里你可以跟着教程搭建一个开发

生命周期这个词大家一听肯定是不陌生了，在Android中有Activity、Fragment、Service…的生命周期（请原谅我是个小Android）；那在ReactNative中组件也是一样有个生命周期的，来引用经典的生命周期流程图：注意：Es5下的getDefaultProps在Es6上对应的函数是static defaultPropsEs5下的getInitialState在Es6上对

ScrollView简介一个包装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。这个就跟Android中的ScrollView总体来说是一样的，将会超出屏幕的视图使用ScrollView包裹来滑动查看。ScrollView文档属性介绍来编写个案例实现下 新创建个ScrollTest.js组件，然后在index.android.js中引入这个组件in

ListView简介 一个核心组件，用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个ListView组件，并且定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为listview的每一行）ListView文档同时它还有

Navigator（导航栏） 在ReactNative v0.43之前的时候官方提供了Navigator组件，在v0.44版本之后官方就把他废弃了这是为什么呢？原因就是有个比他更好的react-navigation导航栏了、不得不说第三方依赖库真的很强大。React Navigation官网地址：https://reactnavigation.org其中包含了我们开发中最常用的三种导航方式

此博客基于react-native-0.49.3上一篇介绍了一下react-navigation依赖库中的StackNavigator 这篇文章就接着上一篇继续往下说也就是依赖库中的第二个导航栏TabNavigator相当于Android中的TabLayoutTabNavigator： 官网地址：https://reactnavigation.org/docs/navigators/tab

此博客基于react-native-0.49.3前面两篇博文已经将react-navigation里面三个重要的导航说完了（不是很高深，毕竟对于初学者还是够了的）、那么现在就可以来搞点事情了。与原生代码进行交互、通信、调用原生api与原生代码交互 使用我们的开发神器Android Studio打开我们项目根目录下的android项目，这样就可以直接在Android Studio上愉快的写代码了。

此博客基于react-native-0.49.3之前我们已经说过ListView这个控件了、FlatList性质也是一样的只不过使用起来更加封闭、内部封装好了 添加头尾布局、下拉刷新、上拉加载等功能…实现的效果：FlatList实现一个最简单的列表<FlatList //数据源 data={[{key: 'a'}, {key: 'b'}]} //渲染每一个Item renderIte

使用react-navigation中的TabNavigator搭建标签导航栏的时候遇到了一个问题，当我们对导航栏只需要设置文字，不设置图片的时候、在ios设备上你会发现文字没有垂直居中（在Android中是好的），因为这个控件默认预留好了图片显示的位置 即使你将showIcon: false设置为false还是一样没有用，我们来看下效果图对比：同时设置图片和文字是正常的当只设置文字时 只需要设