目录 关于层级的zIndex/elevation 1.zIndex是rn在0.30开始支持的属性,是可以生效的: 2.shadow和elevation 结论 关于层级的zIndex/elevation 1.zIndex是rn在0.30开始支持的属性,是可以生效的: 2.shadow和elevation shadow(阴影)开头的样式现在可以在iOS上应用,但在安卓中是不生效的. 而Android上对应的属性是elevationelevation. 设置elevation属性就等价于使用原生的el

最近在使用react-native的时候遇到了很多坑,这里给大家分享下 一.样式 react-native 虽然支持flex布局,但是所有的样式均是css样式的一个很小的集合,尤其是在安卓机下问题尤为凸显: 1.View内部的元素千万不要超出父级的范围,iso上问题倒是不大,安卓上就什么超出的都看不到了 2.lineHeight 可以用,不过千万不要写成小数,否则安卓上会直接崩溃 3.rn的样式不存在继承的情况,所以基本上每个节点都要写style,真的是体力活 4.如果Text的父级元素设置了背

前言 本文 有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我讨论. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关,如文中内容对您造成不便,烦请联系 277511806@qq.com 处理,谢谢. 转载麻烦注明出处,谢谢. 本篇资源:链接: https://pan.baidu.com/s/1cGjEua 密码: scea redux简介 简单来说,redux 就是帮我们统一管理了 react 组件的 state 状态.

ReactNative Android之原生UI组件动态addView不显示问题解决 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:http://www.cnblogs.com/cavalier-/p/7483871.html [TOC] 在如今的App中,已经有成千上万的原生UI部件了--其中的一些是平台的一部分,另一些可能来自于一些第三方库,而且可能你自己还收藏了很多.React Native已经封装了大部分最常见的组件,譬如ScrollView和TextInput,

为何要自己编译React Native安卓私有代码 我们在开发中遇到一个HTTP2的问题,React Native安卓客户端在和HTTP2支持的服务器通讯的过程中会有crash,见 React-Native HTTP2 issue How to build private build 由于时间紧急,发布期限已经拖了好久了,没法等待官方解决方案,只能在本地做修复然后发布. 编译私有React-Native 针对android,React-Native有官方指导说明. 过程中遇到不少坑,记录如下:

1.zIndex 在Android上使用zIndex来控制组件的层级,会遇到元素不显示的问题. 解决方案: 尽量改变组件的顺序,而不用zIndex 尽量不要使用zIndex来控制组件的层级,默认情况下,使用position: 'absolute'后,后面的元素会默认覆盖在前面的元素之上.所以删除zIndex,改变一下组件的顺序就OK啦. issues: https://github.com/facebook/react-native/issues/8968 2.borderStyle:'dash

React Native相关调研总结 一.概要 React Native - 使用React开发世界一流的原生应用: 使用JavaScript和React(对JS有一定扩展)作为开发语言: React Native专注于夸平台的开发效率,一次学习,跨平台应用(支持安卓和iOS). 二.集成步骤 1.前往https://nodejs.org/en/下载node.js的pkg并进行安装 2.前往https://github.com/facebook/react-native下载最新版React Na

Native原生相比于Hybrid或H5最大长处是具有流畅和复杂的交互效果,触摸事件便是当中重要一项,包括点击(Click).长按(LongClick).手势(gesture)等. 以最简单常见的点击(Click)为例,Native组件能够自己定义selector.使得被点击的组件具有动态效果,Android 5.0以上甚至能够有涟漪效果(Material Design).而这些在Hybrid或H5中非常难实现.非常多时候区分它们与原生最简单的方法就是检验点击交互效果. React-Native

一. react-native 常见操作 1.创建项目 react-native init Market(项目名称,首字母大写) 2.安装常用插件 npm install react-native-tab-navigator --save // Tab组件(底部导航) npm install react-native-actionsheet --save // ActionSheet菜单组件 npm install react-native-gifted-listview --save // 下

1.项目目录 2.redux (1)app/redux/action/action.js /** * 步骤一 * 行为 action */ // 定义行为名称 export const CHANGE_TEXT = 'CHANGE_TEXT'; // 初始化 CHANGE_TEXT 对象 export const changeText = (text) => { // 接收test参数 return { type: CHANGE_TEXT, // 名称 text // 参数 默认值 } }; (2

一. 我们的要求 期望的要求 基于React语法,将RN项目转化为小程序项目 该小程序能同时在 微信小程序 和 支付宝小程序这两个平台运行 底线要求 底线是能转成微信小程序,因为目前来说,因为微信先发制人,再加上微信本身的用户黏性,导致在小程序这一块大多数其他平台都难以迎头赶上,包括支付宝小程序,百度小程序,头条小程序等等. 二. 目前可供选择的生态,以及各自存在的问题 能将已有RN项目转化为微信小程序的工具, 比如 Alita ,但它不能转成支付宝或其他小程序 从零开发的多端框架,比如Taro

一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级表示的是应用,这是table的最左边的数据.然后是按钮的数据,这里显示在table的头部. 二.效果图如下 三.具体代码 1.RoleApplicationTable.js import React from 'react'; import RoleCheckbox from 'components

模块加载痛点 大家也或多或少的了解node模块的加载机制,最为粗浅的表述就是依次从当前目录向上级查询node_modules目录,若发现依赖则加载.但是随着应用规模的加大,目录层级越来越深,若是在某个模块中想要通过require方式以依赖名称或相对路径的方式引用其他模块就非常麻烦,影响开发效率和美观. 示例demo: // 当前目录: /usr/local/test/index.js // gulp模块所在路径为 /usr/lib/node_modules var gulp = require(

在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式. 我们来个简单的示例: var AwesomeProject = React.createClass({ getInitialState() { return { w: 200, h: 20 } }, _onPress() { //每按一次增加近30宽高 var count = 0; while(++count<30){ requestAnimationFra

LayoutAnimation - layout动画 当布局发生改变时的动画模块,它有两个方法: 1. 最常用的方法是 LayoutAnimation.configureNext(conf<Object>),用于设置布局变化时的动画类型,在调用 setState 之前使用. 其中 conf 参数格式为: { duration: 700, //持续时间 create: { //若是新布局的动画类型 type: 'linear', property: 'opacity' }, update: {

Alert - 弹窗 通过 Alert.alert() 方法调用唤起原生弹窗,点击会触发 onPress 回调(参考下方代码)并清除弹窗. import React, { AppRegistry, Component, StyleSheet, Alert, Text, View } from 'react-native'; class AwesomeProject extends Component { componentDidMount(){ Alert.alert( 'Alert标题', '

前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持.对性能有要求的情况下还是需要进行一定的原生的开发,合理的组件实现方式可以降低使用和跨平台的成本. (底层实现分析参见:React-Native 渲染实现分析,本文仅讨论组件开发方法) React Native组件开发 RN的组件开发有几种方式,JS组件.Native功能组件.NativeUI组件.J

前言 React Native与传统的HybirdApp最大区别就是抛开WebView,使用JSC+原生组件的方式进行渲染,那么整个App启动/渲染流程又是怎样的呢? React Native启动流程 首先从组件的角度来看下RN的启动流程:(Android为例) Native初始化,主要流程:ReactNativeHost -> Activity -> ReactRootView -> startReactApplication -> createReactContextInBac

前言 动画对于客户端来说是非常重要的一部分,直接影响到应用的用户体验.前端对于动画优化通常使用CSS3样式来实现动画,以利用GPU加速特性.而React-Native由于渲染模式的不同,无法使用CSS样式的方式优化. React-Native的实现 React-Native在动画方面有两个主要方式,一个是Animated,一个是LayoutAnimation. Animated Animated动画库的原理是由JavaScript来进行动画的计算,然后在每帧设置对应组件的style来实现动画过程

近段时间一直在忙,所以博客也没有更新,这两天我翻了一下写的这几篇博客,感觉写的都很片面,所以,我想重新写一个系列教程,从最基础的开始,来让大家更容易学会React-Native. 这个系列大部分只介绍Android和iOS通用的部分 一.关于RN环境搭建 这个问题我在博客上写过,既然是系列教程,那么就在这个系列里面重新再写一遍 1.Mac上搭建RN开发环境 安装homebrew:打开终端输入 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuse