React Native
无枝可依
这个作者很懒,什么都没留下…
展开
-
WebStorm开发工具设置React Native代码智能提醒
WebStorm开发工具设置React Native代码智能提醒 第一步: 首先大家可以把该项目下载或者如下命令clone下来:git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate 第二步: 安装方法一(Windows和Mac都支持):file -> import settings -> ReactNat原创 2017-10-25 10:28:54 · 343 阅读 · 0 评论 -
ReactNative手动生成JSBundle文件
一、根目录下有个package.json文件{ "name": "rncenter", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", /原创 2017-10-16 17:22:49 · 4158 阅读 · 1 评论 -
第三章、ReactNative页面跳转
参考:ReactNative-中文网:ReactNative StackNavigation页面跳转ReactNative中文网社区今后主推的方案是一个单独的导航库react-navigation,它的使用十分简单。第一步: 安装组件yarn add react-navigation第二步: 然后你就可以快速创建一个有两个页面(Main和Profile)的应用了:impor原创 2017-08-14 11:46:58 · 2987 阅读 · 0 评论 -
Window上搭建 ES6语法测环境
准备: 1. 官网下载并安装: node下载地址 https://nodejs.org/en/ 2. 配置环境变量: 把node.exe所在目录加入到PATH环境变量中。 3. 命令行执行 node 强调内容 -v 和 npm -v 能出版本号,说明安装成功。 一.新建项目 JavaScript6工作目录下运行 npm init命令,一路填写或跳过得到一个基础的package.json原创 2017-09-25 11:12:20 · 1047 阅读 · 0 评论 -
第二章、React-Native生命周期
componentWillMount{//渲染前调用一次,这个时候DOM结构还没有渲染}。componentDidMount(){//渲染完成后调用一次,这个时候DOM结构已经渲染了。这个时候就可以初始化其他框架的设置了,如果利用jQuery绑定事件等等。}componentWillReceiveProps(){ //初始化渲染不会调用,在接收到新的props时,会调用这个方原创 2017-08-12 13:22:28 · 250 阅读 · 0 评论 -
第四章、ReactNative组件的封装
ReactNative组件的封装官网地址https://facebook.github.io/react-native/docs/native-components-android.html封装原生组件的步骤 1.创建一个ViewManager的子类。 2.实现createViewInstance方法。 3.导出视图的属性设置器:使用@ReactProp(或@ReactPropGro原创 2017-09-26 16:11:08 · 564 阅读 · 0 评论 -
第七章、 ReactNative与原生之间的接口交互
ReactNative与原生之间的接口交互React与Native交互官网 https://facebook.github.io/react-native/docs/native-modules-android.html一、实现ReactContextBaseJavaModule接口比如要做一个统计功能的Api,需要调用Java代码进行数据统计上报. 先新建一个Java类Statics.javap原创 2017-09-26 10:30:22 · 1231 阅读 · 0 评论 -
第六章、ReactNative预加载解决方案
ReactNative预加载脚本以及RootView之方案第一步、实现ReactRootView缓存功能源码如下:public class XNReactNativePreLoader { private static final Map<String,ReactRootView> S_REACT_ROOT_VIEW_CACHE = new HashMap<>(); /**原创 2017-10-13 22:48:32 · 1517 阅读 · 1 评论 -
第一章、react 组件的生命周期
组件的生命周期分成三个状态:Mounting:已插入真实 DOMUpdating:正在被重新渲染Unmounting:已移出真实 DOMReact 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。componentWillMount()componentDidMount(原创 2017-02-19 10:03:48 · 222 阅读 · 0 评论 -
第五章、ReactNative直接修改View的属性方法
ReactNative直接修改View的属性方法第一种方案 设置组件的属生 ref = “view” <TouchableOpacity ref = "view" //这里设置对当前组件的引用 onPress = { this.onButtonClicked.bind(this) }原创 2017-09-29 15:24:17 · 3594 阅读 · 0 评论 -
第八章、ReactNative 用ListView实现GridView效果
ReactNative 用ListView实现GridView效果 直接上代码,多说无用. 选构造数据;//构造数据request() { const rowData = Array.from(new Array(15)) .map((value, index) => ({text: "item " + index, clicked: 0}))原创 2017-10-18 11:53:58 · 1232 阅读 · 0 评论 -
React:react-native-scrollable-tab-view
Add it to your projectRun npm install react-native-scrollable-tab-view --savevar ScrollableTabView = require('react-native-scrollable-tab-view');ExamplesSimpleExample.ScrollableT原创 2017-02-19 14:24:53 · 580 阅读 · 0 评论 -
React 获取真实的DOM节点
获取真实的DOM节点组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。var MyComponent = React.createClass({ handleClick: function() {原创 2017-02-19 10:16:16 · 7874 阅读 · 0 评论 -
ReactNative自定义控件状态更新的正确姿势
ReactNative自定义控件状态更新的正确姿势我们经常要自定义一个ReactNative控件,而在Render()方法中会用到组件的属性,而这些属性不能即时更新,导致界面不能刷新。举例如下:比如我们定义了一个按钮组件,这个组件外部会指定一个颜色,我们在构造方法中初始化当前的属性borderColor为this.props.borderColor;export default class Butt原创 2017-10-26 16:24:34 · 983 阅读 · 0 评论