![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Native
文章平均质量分 87
yuanmengong886
这个作者很懒,什么都没留下…
展开
-
(十二)React-Native-生命周期详解
一.React-Native生命周期说到生命周期,大家大概也能想到就是创建、销毁、状态改变。RN的组件就是一个状态机。它接收两个输入参数:props和state,返回一个Virtual DOM。和Native一样,RN也为我们提供相应的钩子函数。RN的状态变化取决于props和state。我们先来看一张经典图。这张图涵盖了一个组件从创建、运行到销毁的整个过程。大家可以看到,初始原创 2016-11-04 11:17:23 · 2208 阅读 · 0 评论 -
(十)React Native---ListView 组件
ListView - 一个核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源,然后给它传递一个普通的数据数组,再使用数据源来实例化一个ListView组件,并且定义它的renderRow回调函数,这个函数会接受数组中的每个数据作为参数,返回一个可渲染的组件(作为listview的每一行)。ListView还支持原创 2016-11-01 09:40:22 · 765 阅读 · 0 评论 -
(十一)React Native---与原生交互
一:原生传递参数给React Native1:原生给React Native传参原生给JS传数据,主要依靠属性。通过initialProperties,这个RCTRootView的初始化函数的参数来完成。RCTRootView还有一个appProperties属性,修改这个属性,JS端会调用相应的渲染方法。我们使用RCTRootView将React Natvie视图封装到原生组原创 2016-11-01 09:46:58 · 2187 阅读 · 0 评论 -
React/React Native 的ES5 ES6写法对照表
原博客地址 React Native 中文社区 http://bbs.reactnative.cn/topic/15/react-react-native-的es5-es6写法对照表很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和转载 2016-11-30 14:33:06 · 270 阅读 · 0 评论 -
(十七)ReactNative 中动画详解
大多数情况下,在 React Native 中创建动画是推荐使用 Animated API 的,其提供了三个主要的方法用于创建动画:Animated.timing() -- 推动一个值按照一个过渡曲线而随时间变化。 Easing 模块定义了很多缓冲曲线函数。Animated.decay() -- 推动一个值以一个初始的速度和一个衰减系数逐渐变为0。Animated.spring() --转载 2016-12-01 16:48:25 · 1382 阅读 · 0 评论 -
(十四)Reactnative中ref属相详解
在用Reactnative写工程时,默认奇妙的有一种像OC中,或者java 中或者当前类的私有属相的想法,state 和props都不能满足时,就是ref 它能达到其他语言中持有一个view组件,并且局部的刷新ref 接受值为string类型的参数或者一个函数functioncallback。这一特性让开发者对ref的使用更加灵活。render() { return原创 2016-11-25 20:23:32 · 7986 阅读 · 0 评论 -
(十五)Reactnative不同Navigator 之间的传值
'use strict';var React = require('react-native');var { AppRegistry, StyleSheet, Text, View, Navigator, Image, TouchableHighlight, TouchableOpacity} = React;class T原创 2016-11-25 23:25:21 · 792 阅读 · 0 评论 -
(十八) ReactNative 发布线上时打包详解
使用Reactnative 进行 bundle的打包 1. 使用 curl liunx/unix 命令 进行bundle 打包 (不能对图片资源等进行打包,) 1). curl url :拉去网页上对应的数据 1curl http://www.baidu.com 如发现原创 2016-12-21 17:28:42 · 1711 阅读 · 0 评论 -
(十九)在现有项目中集成ReactNaitve
介绍: 在现有项目中集成ReactNative 本文大纲 : 1. 集成纯ReactNative 的项目 2. 在现有项目中手动集成ReactNative 3. 在现有项目中 使用CocoaPod 集成ReactNative 1.集成纯ReactNative 的项目 react-native init awesom原创 2016-12-22 14:39:10 · 914 阅读 · 0 评论 -
(九)React Native---ScrollView组件
一个包装了平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统。记住ScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)。要给一个ScrollView确定一个高度的话,要么直接给它设置高度(不建议),要么确定所有的父容器都已经绑定了高度。在视图栈的任意一个位置忘记使用{fl原创 2016-11-01 09:38:48 · 449 阅读 · 0 评论 -
(八)React Native---WebView组件
创建一个原生的WebView,可以用于访问一个网页。可以加载一个URL也可以加载一段html代码;一:属性1:iosallowsInlineMediaPlayback bool 指定HTML5视频是在网页当前位置播放还是使用原生的全屏播放器播放。 默认值为false。注意 : 要让视频在网页中播放,不光要将这个属性设为true,HTML中的视频元素本身也需要包含webkit-pla原创 2016-11-01 09:36:48 · 681 阅读 · 0 评论 -
(七)React Native---TabBarIOS 组件
一:简介两个TabBarIOS和TabBarIOS.Item组件可以实现页面Tab切换的功能,Tab页面切换的架构在应用开发中还是非常常见的.如:腾讯QQ,淘宝,美团外卖等等二:TabBarIOS.Item属性1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)2.badge string,number 在图标的右上方显示小红色气泡,显示信原创 2016-11-01 09:35:17 · 411 阅读 · 0 评论 -
(十三)ReactNative--- React.creatClass 和React.component的区别
1. 使用React.createClass()的格式,var ReactiveOne = React.createClass({ // constructor:function (props) { // // super(props); // coosole.log('constructor'); // }, getDefault原创 2016-11-04 14:44:56 · 1385 阅读 · 0 评论 -
(一)React Native---FlexBox 布局
一:理论知识点1:什么是FlexBox布局?弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒装模型提供最大的灵活性。Flex布局主要思想是:让容器有能力让其子项目能够改变其宽度、高度(甚至是顺序),以最佳方式填充可用空间;2:Flex布局基于f原创 2016-10-31 21:45:27 · 507 阅读 · 0 评论 -
(二)React Native---Text 组件
Text用于显示文本的React组件,并且它也支持嵌套、样式,以及触摸处理。在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加了它自己额外的样式。标题和文本会在顶部依次堆叠,并且被代码中内嵌的换行符分隔开。一:属性1:allowFontScaling bool(iOS特有):控制字体是否要根据iOS的“文本大原创 2016-10-31 22:24:25 · 398 阅读 · 0 评论 -
(十六)ReactNative 中获取当前文件的相对路径和相对路径
在 React 中如何后获取当前文件的绝对路经和相对路径使用RN来写iOS或者android 时,想和原声工程项目的目录 来清楚工程模块 ,在使用每个js 文件时通过require 引用当前要使用模块为了后期的维护和管理,面对这一些通过绝对路径或相对路径引入的模块,真不知如何下手。import React, { Component } from 'react';import原创 2016-11-28 19:26:35 · 14926 阅读 · 1 评论 -
(三)React Native---TextInput
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。它的样式属性跟Text是一样;一:属性1:autoCapitalize enum('none', 'sentences', 'words', 'characters') 控制TextInput是原创 2016-11-01 00:12:17 · 482 阅读 · 0 评论 -
(四)React Native---Image组件
一个用于显示多种不同类型图片的React组件,包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片(如相册)等 一:属性1:onLayout function 当元素挂载或者布局改变的时候调用,参数为:{nativeEvent: {layout: {x, y, width, height}}}.2:onLoad function 加载成功完成原创 2016-11-01 09:30:35 · 480 阅读 · 0 评论 -
(五)React Native---Touchable组件
React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件也绑定点击事件,React Native提供了3个组件来做这件事。1.TouchableHighlight:高亮触摸,用户点击时,会产生高亮效果。2.TouchableOpacity:透明触摸。用户点击时,点击的组件会出现透明效果。原创 2016-11-01 09:32:03 · 342 阅读 · 0 评论 -
(六)React Native---NavigatorIOS 组件
NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面。本组件并非由Facebook官方开发组维护。这一组件的开发完全由社区主导。如果纯js的方案能够满足你的需求的话,那么我们建议你选择Navigator组件(理论知识可以见React Native中文网)。一:概念内容1:路由:一个路由是用于描述导航器中一页的对象。NavigatorIOS的第一个路由通过原创 2016-11-01 09:33:38 · 1298 阅读 · 0 评论 -
ReactNative 的调试技巧和心得
在做React Native开发时,少不了的需要对react Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。Developer MenuDeveloper Menu是react native给开发者定制的一个开发者菜单,来帮助开发者调试React Nat转载 2017-07-07 19:01:52 · 437 阅读 · 0 评论