vivian的专栏

第一个ReactNativeProjectcmd运行命令行：react-native init AwesomeProjectcd AwesomeProject，cmd运行 react-native startcmd打开另外一个命令行。cd AwesomeProject，cmd运行react-native run-android如果是Device运行时，出现红色的一些提示。可以试试下面的操作

Component - Navigator应用一般是由很多页面组成。多页面的切换需要由路由或导航。RN中对应的控件是：Navigator（Android/IOS)，NavigatorIOSNavigator，NavigatorIOS都可以用来管理应用中的Page导航。导航器建立了一个路由栈，用来弹出，推入或者替换路由状态。他们和H5的history API类似。Navigator...

Component - ImageRN Image组件调用途径途径有很多：网络图片、本地图片、照相机图片主要属性：resizeMode enum(‘cover’, ‘contain’, ‘stretch’) 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬...

真机调试开启USB调试 adb reverse tcp:8081 tcp:8081（Android 5.0以上：不使用设定ip和端口）摇晃手机，弹出Menu。选择debug （需要安装chrome浏览器）console.log() 打出调试信息breakpoint 断点调试设备端 Menu手机摇晃会出现MenuReloadJS重新加载JS和刷新http://...

物理back键处理需求 ：实现：点击back， 连续点击退出app关键Code_onBackPress = (event) => { let nav = this.refs.navigator; let routers = nav.getCurrentRoutes(); if (routers.length > 1) { na...

Introduction热更新在不用的领域有着多重多样的解释。我们关心的app的热更新简单来讲是：无需发新版本，实现app添加新功能。这里主要介绍Microsoft退出的CodePush平台实现热更新。它是一个云端服务，支持Cordova and React Native的开发者直接更新app, 而无需重新安装apk.微软的codepush微软的codepush框架操作原理是这...

1.父子组件ReactJS中数据的流动是单向的父组件传递数据给子组件: 可以通过设置子组件的props传递数据给子组件。子组件改变父组件的数据: 可以在父组件中传一个callback(回调函数)给子组件，子组件调用callback可改变父组件的数据。实例：点击子组件，改变父组件的背景色export default class SampleOne extends Componen...

Android包名修改AndroidStudio打开项目 right click to “Open Module Setting”. Go to the Flavours tab. Change the applicationID to whatever package name you want. Press OK. 调整AndroidManifest.xml中个别包名依赖项例如...

Android Native Moudule在RN控件或功能无法满足需求时，需要Native Module来帮忙，需要平台API。使用场景：React Native还不支持某个你需要的原生特性，你可以自己实现该特性的封装。如何封装这些RN没有的模块呢？现有步骤介绍和Sample CodeArgument Types@ReactMethod RN参数跟JS参数的对比map，我...

content {:toc}1. npm 安装npm install –save libname (from network) npm install –save “E:\Download\react-native-router-master” (from local)2. 设定npm全局模块以及cache的路径npm作为一个NodeJS的模块管理。需要先配置npm...

1. 生成一个签名密钥在android/app下面生成keystore file： 可以用工具Eclipse，AndroidStudio生成。命令：keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000密码可以...

Redux简介Redux是继FB Flux 架构后推出的管理 React 数据流的亮眼之作。可以说Redux是对Flux 架构的一些简化。 Redux 限定一个store，让应用中数据结果集中化，提高可控性。Action、Reducer、及 StoreRedux 主要分为三个部分 Action、Reducer、及 Store. 下面以counter Sample核心Code为例...

Component - ProgressBar封装了Android平台上的ProgressBar的React组件。这个组件可以用来表示应用正在加载或者有些事情正在进行中。ProgressBarAnroid关键代码： Sample Code 官网API地址Component - ...

Component - TextInputTextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。最简单的用法就是丢一个TextInput到应用里，然后订阅它的onChangeText事件来读取用户的输入。它还有一些其它的事件，譬如onSubmitEditi...

React的核心思想是组件化，必然需要知晓组件的通讯 ReactJS组件关系是一层套一层，DOM结构。就像HTML的标签。组织结构比较清晰。 组件分为：父组件，子组件 1.子组件如何调用父组件的方案方法：this.props2.父组件如何调用子组件方法：ReactDOM.findDOMNode(this.refs.child)首先给child组件去个名字：ref="child"；然后用th

步骤一：npm install -g rimraf步骤二：rimraf node_modules

第五课 ReactNative 实例ReactNative 实例效果源码ReactNative中有很多跟React的语法不同。例如：样式.label -> lable:pading:0 3px 3px 0; -> padingTop:0, …… paddingLeft 0，元素margin -> margin书写格式justity-content: -> justifyContent:源码下载htt

FaceBook ReactNative官网 ：https://facebook.github.io/react-native/ReactNative中文blog ： http://reactnative.cn/blog.html

React是由ReactJS与React Native组成。其中ReactJS是Facebook开源的一个前端框架。 React Native是ReactJS思想在native上的体现！ JSX并不是一门新的语言，仅仅是个语法糖，允许开发者在JavaScript中书写HTML语法。最后每个HTML标签都转化为JavaScript代码来运行1. 环境依赖于react JS环境 在Code中可以看

ReactNative关键是ReactJS思想在Native上的体现。 ReactJS核心思想：组件化。 每个组件维护自动的状态和UI，状态变化时，自动重新渲染。多个组件组成了ReactJS应用。组件看Sample文件 https://yunpan.cn/cSLnXwpc4u3tI （提取码：6760） 下面几个常用项：React是全局对象，顶层API与组件APIReact.crea

搭建步骤整理到下面档案：https://yunpan.cn/cPnMZrdLHiVu4 （提取码：dc13）

React Native中没有DOM的概念，只有组件的概念。 因此在ReactJS中使用的Html标签以及对DOM的操作是不起作用的。 不过组件的生命周期、JSX的语法、事件绑定、自定义属性等，在RN和ReactJS中是一样的。用组件嵌套组件的方式实现，效果图： 其中的大概逻辑是：MargginBox ：使用Box，childName=”borderBox”，通过{this.pr...

View跟标签div类似,支持多层嵌套，支持flexbox布局实例布局逻辑分析：水平均分成三栏左边部分内容和布局都居中中间部分内容和布局都居中；“中上”和“中下” 区域左右两边有竖线。“中上”，“中下”均分中间部分，中间有横线右边部分内容和布局都居中；“右上”和“右下”均分右边部分，中间有横线Sample CodeText用于显示文本。可以嵌套，继承。...

Component - ViewPager一个允许在子视图之间左右翻页的容器。每一个ViewPagerAndroid的子容器会被视作一个单独的页，并且会被拉伸填满ViewPagerAndroid。注意所有的子视图都必须是纯View，而不能是自定义的复合容器。你可以给每个子视图设置样式属性譬如padding或backgroundColor。关键代码： ...

基本的差异性两个不错的对比介绍：weex&ReactNative对比weex&ReactNative对比感触跨平台：RN支持android和IOS，Weex支持android/IOS和web三个平台。 Weex支持的平台比RN多一种，但是当真正开始写demo的时候却发现，移动端(android/ios)和web端(PC browser)的界面布局有很大...