星宇大前端

最近一直搞RN都没有时间更新博客，今天调试了一个安卓奇怪的问题，记录下。背景我们的项目目前比较成熟，安卓和iOS都有版本，在迭代更新。因为业务需求，改动频繁和量大决定混合RN。所以在已有原生应用的基础上，我将安卓和iOS 项目都集成到了一个RN项目。 问题在安卓项目了，我是在一个原生的Activity里添加了一个RN View（ReactRootView）。这个Vie...

移动跨平台框架React Native经过4年的发展，其生态已经变得异常丰富，在使用React Native开发项目的过程中，为了提高开发效率，我们经常会借鉴一些使用使用率比较高的开源库，根据大众的需求，对这些使用较高的 React-Native UI 库，我们做一个简单的总结和归类，方便大家更好地入门 React Native。本文只是收集了一些常见的UI库和功能库，除了上面介绍的知名第三方库...

1.react-native --version                                  //查看当前reactNative版本2.sudo npm update -g react-native-cli         //更新全局的reactNative到最新版本3.npm info react-native        //查看服务器端的reactNativ

ReactNative 集成原生项目，打包ipa和apk过程记录分析。 过程总览将开发JS部分打成离线Bundle供原生调用iOS 更改入口路径（安卓则配置即可）具体见下面iOS和安卓分别打包详细过程。 iOS打包ipa过程1、在你的RN项目里新建一个输出文件夹，如下图名称可以自定义。![在这里插入图片描述](https://img-blog.cs...

效果：引用文件代码：import React, { Component } from 'react';import { AppRegistry, Image, Text, View, StyleSheet,} from 'react-native';var ZYButton = require('./ZYButt

Touchable组件是什么从字面上的意思我们就可以理解，Touchable是可触摸的控件，相当于我们iOS的简单手势。复杂的RN处理手势还有专门的API如果你想实现视图的拖拽，或是实现自定义的手势，那么请参阅PanResponder API或是手势识别系统的文档。    Touchable现在主要有四种组件，TouchableHighlight 、TouchableOpa

前言：         在面向对象编程中，任何对象的存在都会存在生命周期。类似我们iOS 的View，就会有LoadView，ViewWillAppear，ViewDidLoad等等生命周期。RN也不例外，这篇主要学习RN的生命周期，在开发中如果掌握了并熟练的运用生命周期函数的话，往往开发能事半功倍。React Native生命周期简介

TextInput是什么      文本输入框，相当于iOS中我们熟悉的UITextField，通过键盘输入并显示内容。      两者属性有很大相同之处，下面大家一起看一下。TextInput常见属性 下面是TextInput常用的属性，大家对于 UITextField都很熟悉了，常用属性就不一一写代码发效果图，自己可以试试。

序：     学完了Flex布局和Text Image组件，感觉可以总结一下了。因为本人对英雄联盟比较感兴趣，所以准备把前面学习的做一个应用小例子。     都是前面文章提到内容，主要练习下熟练度，就不写备注了。先看下效果:     代码如下：import React, { Component } from 'react';import {

1、什么是Image组件    这里的Image并不是iOS中的UIImage，而相当于UIImageView组件。通过这个组件可以展示各种各样的图片，而且在React Native中该组件可以通过多种方式加载图片资源。常见有如下加载方式：从项目里加载从APP中加载加载网络图片      2、Image组件的基本用法

1、什么是Text     在iOS中很多组件都有显示文字的功能，一般文字都是写在Label上。在ReactNative中类似Label显示文字的组件叫什么呢，也就是我们今天要学的这个Text组件。Text可以嵌套，设置事件处理等等2、Text组件常用的属性方法        Attributes.style = {

1、获取屏幕宽高RN通过Dimensions组件来获取设备信息,Dimensions路径：.../node_modules/react-native/Libraries/Utilities获取代码：import React, { Component } from 'react';import { AppRegistry, St

序：    布局想必大家都知道，在iOS 中我们使用代码计算屏幕宽高布局，使用Autoresizing和AutoLayout进行布局。JSX是什么

JSX是什么字面上来看JSX即 JavaScript XML取首字母结合，所以JSX并不是一门新语言，仅仅是个语法糖。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到我们在浏览器运行的时候，JSX语法会通过Babel转换成浏览器认识的JS。Babel：我们装RN的时候你会再目录看到很多Babel文件夹，JSX语法依赖于Babel进行解析翻译。那么

React Native是什么           Facebook于2015年9月15日发布React Native，广大开发者可以使用JavaScript和React开发跨平台移动应用，React Native提倡组件化开发，即提供一个个封装好的组件，然后组件相互嵌套形成新的组件。          它充分利用了Facebook现有的业务轮子, 其核心设计理

序：   有时候我们并不是需要全部使用React Native,我们想和原生混合开发，那我们应该怎么办呢。先看一下我集成完之后的项目目录：首先安装React Native node组件       1、新建一个文件夹如目录中的RN，这个文件夹用于存放React Native相关内容       2、新建一个package.

React Native 已经推出近一年时间了，近期也在研究iOS下用js写app的框架，从徘徊和犹豫中，最终还是选定React Native，她就像若隐若现的女神一样，想要下决心追到，可是不容易。要想把她应用的已存在的有一定体量的app中，更是不易，让我先把她里外都了解清楚，在分享一下合理应用到现有app的方案,这是深入React Native系列的第一篇，后续会继续分享使用过程中的一些认识。