measure()测量是根据view标签中的ref属性,使用方法如下: measureWatermarkerImage(){ this.refs.watermarkerImage.measure((a, b, width, height, px, py) => this.setState({watermarkerImageWidth: width}) );} with:宽:height:高:px:x轴方向距离左边多少像素:py:y轴方向距离上边多少像素: 根据项目需要,如果需要在页面加载完成后进

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 JSX 和 组件 的概念 React的核心机制之一就是虚拟DOM(可以在内存中创建的虚拟DOM元素)React利用虚拟DOM来

React Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点. import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FixedDimensionsBasics extends Component { render() { return ( <View> <View style={{width: 50, height: 50

React Native实现以下布局效果:携html5(http://m.ctrip.com/html5/) 基于HelloWord修改项目代码: /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, PixelRatio, Text

var Dimensions = require('Dimensions'); var {width,height} = Dimensions.get("window");//第一种写法 var width1 = Dimensions.get('window').width//第二种写法 export default class Demo extends Component { render() { return ( <View style={styles.container}&

我们要生成如下的构图   直接上图,不解释.       如下图所示,定义函数,函数之间不需要逗号,在元素上添加事件,使用关键字this.{function name}    

一. JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能.传统的创建方式是: 但这样的代码可读性并不好,于是React发明了JSX,利用我们熟悉的HTML语法来创建虚拟DOM: 在实际开发中,JSX在产品打包阶段都已经编译成纯JavaScript,JSX的语法不会带来任何性能影响.因此,JSX本身并不是什么高深的技术,可以说只是一个比较高级但很直观的语法糖. 二. View组件中常见的属性  

前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让你们能够在看React Native语法的时候不那么费劲,有过前端开发经验的可以直接忽略. 什么是React React是一个JavaScript框架,用来开发web应用.Web应用开发中,比较流行的有三个框架: react angular vue 从名字上,就能看到react native是基于R

关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescript(简称TS)是我的首选,他可以编译成JavaScript,编译成的JavaScript代码可读性很好,但是这不是关键,关键是TS开发和调试效率极高. 但是React Native官方是使用js的开发的,如果如果使用TS开发React Native的关键是transformer. eact-nati

React Native & react-native-web-player & React Native for Web https://github.com/dabbott/react-native-web-player https://dabbott.github.io/react-native-web-player/ import React, { Component } from 'react' import { AppRegistry, StyleSheet, Text, Vi

下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水.特此记录下. 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付. 2.导航条渐隐 3.通讯录 4.卡片式轮播 5.时间轴 6.图片+列表的组合效果 7.图片下拉放大 8.原生视频播放器 9.react-navigation的使用和变更 10.倒计时 11.多张图片查看 12.自定义页面加载指示器 ...... 1.微信及朋友圈分享,微信支付: https://github.com

前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让你们能够在看React Native语法的时候不那么费劲,有过前端开发经验的可以直接忽略. 什么是React React是一个JavaScript框架,用来开发web应用.Web应用开发中,比较流行的有三个框架: react angular vue 从名字上,就能看到react native是基于R

概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解. What's React React是一个用于组建用户界面的JavaScript库,让你以更简单的方式来创建交互式用户界面. 当数据改变时,React将高效的更新和渲染需要更新的组件.声明性视图使你的代码更可预测,更容易调试. 构建封装管理自己的状态的组件,然后将它们组装成复杂的用户界面.由于组件逻辑是用

概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解. What's React React是一个用于组建用户界面的JavaScript库,让你以更简单的方式来创建交互式用户界面. 当数据改变时,React将高效的更新和渲染需要更新的组件.声明性视图使你的代码更可预测,更容易调试. 构建封装管理自己的状态的组件,然后将它们组装成复杂的用户界面.由于组件逻辑是用

View 组件是React Native最基本的组件.绝大部分其他React Native 组件. View组件的颜色和边框 backgroundColor 键用来指定颜色. RN 0.19版本开始,只有Text和TextInput组件会继承父组件的背景颜色 Opacity键定义了View组件的透明度, 取值0-1, 0表示完全透明 borderStyle键用来设置边框的风格,只能取值solid, dotted和dashed三个值之一,分别表示实线边框,点状边框和虚线边框, 默认值是solid

本篇文章,我们主要讨论如何实现Android平台的混合开发. RN给Android端发送消息 首先打开Android Studio, Open工程, 在React Native项目目录下选择android子目录下的build.gradle文件打开. React Native已经默认帮我们创建好了两个类MainApplication和MainActivity public class MainApplication extends Application implements ReactAppli

初学React Native,如果没有人指引,会发现好多东西无从下手,但当有人指引后,会发现其实很简单.这也是本人写这篇博客的主要原因,希望能帮到初学者. 本文不会介绍如何搭建开发环境,如果你还没有搭建,可参考这里的官方文档:https://react-native.org/doc/getting-started.html . 本文也不会介绍各种组件,太多了,可参考这里的官方文档:https://react-native.org/doc/components-and-apis.html . 本文

React Native组件解析(二)之View 0.JSX React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. JSX的语法如下 return ( <View style={styles3.container}> <Text> 当前屏幕的宽度:{Dimensions.get('window').width} </Text> </View> ); 在实际开发中,JSX在产品

掌握了React Native的组件就可以使用IOS的原生组件和API. 一 View组件 就像开发web应用程序中,需要使用很多的HTML标签.例如 div,form.但是在基于DIV+CSS布局的web开发中,最为重要的元素就是 . DIV是页面布局的基础,是作为容器元素存在的.在React Native中,类似于HTML的DIV的组件就是 View组件. 1 View组件介绍 作为创建UI时最基础的组件,View是一个支持Flexbox布局.样式.一些触摸处理.和一些无障碍功能的容器,并且

In this final React Native lesson of the series we will finalize the Notes view component and squash a few bugs in the code. import firebase from 'firebase'; import React from 'react'; import { View, StyleSheet, Text, ListView, TextInput, TouchableHi

px:设备实际像素单位 dp/pt:逻辑像素单位(IOS的尺寸单位为pt,Android的尺寸单位为dp) 在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面. UI 给默认 640 的图,采用 pxToDp 函数,即可将 UI 等比放大到机器上. import {Dimensions} from 'react-native'; // 58 app 只有竖屏模式,所以可以只获取一次 width const deviceWidthDp = Dimensions.get('window').wi