混合开发的大趋势之一React Native State (状态)，Style（样式）
转载请注明出处：
今天又加了几个疑难杂症哦！！
上一篇讲了属性，这一篇主要讲 State Style，给出上次的传送门，以便有更好的连贯性:
State 状态
在RN中用来描述对象的除了属性Props还有状态State,那么状态又是个什么东西呢？
There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.
In general, you should initialize state in the constructor, and then
call setState when you want to change it.
这一段英文很罗嗦但是我们看下关键的信息
1 .props是在父组件中指定，一经指定，在被指定的生命周期中则不再改变
2 .对于需要改变的数据，我们需要使用state
3 .需要在constructor中初始化state，然后在需要修改时调用setState方法。
OH说得好抽象？白话一点就是 props类似于一个final类型的东西，一旦初始化了就无法改变了但是state可以变，而且只要setState就行了，想怎么变都随你，根据业务需求各种set吧！
然后看一个 文字隐藏显示的例子
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
setInterval(() =& {
this.setState({ showText: !this.state.showText });
render() {
let display = this.state.showText ? this.props.text : ' ';
&Text&{display}&/Text&
class BlinkApp extends Component {
render() {
&Blink text='I love to blink' /&
&Blink text='Yes blinking is so great' /&
&Blink text='Why did they ever take this out of HTML' /&
&Blink text='Look at me look at me look at me' /&
AppRegistry.registerComponent('BlinkApp', () =& BlinkApp);
在“构造函数”里初始化让他默认为 true
然后调用计时器方法（这部分API以后会介绍），
然后 每次调用都吧state属性设置为相反值。
触发时间为1秒，然后就是图里的效果了。
从头到尾 只在一开始给予Props赋值了文字内容改变的行为都是 state执行的。
这就是state，不太难理解但是常常使用的一个知识点。
状态容器API:
Style 样式
样式这个东西大家肯定不陌生，JS在WEB端的好搭档CSS也在RN出现，来负责“颜值”相关的功能，只是语法稍有变化，我们来看看官方是怎么讲的
官方说了，我们不需要为了样式学什么新的语法，只是他和Web的CSS有一些小小的差异而已，然后举了个background-color的例子.
一个View可以有多个样式属性，他们以数组形势共存，当然如果多个样式出现重复，排在那么右边的会覆盖之前的，具体情况我们看一下他的例子
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class LotsOfStyles extends Component {
render() {
&Text style={styles.red}&just red&/Text&
&Text style={styles.bigblue}&just bigblue&/Text&
&Text style={[styles.bigblue, styles.red]}&bigblue, then red&/Text&
&Text style={[styles.red, styles.bigblue]}&red, then bigblue&/Text&
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
color: 'red',
AppRegistry.registerComponent('LotsOfStyles', () =& LotsOfStyles);
这里的 styles变量有2种样式 一个是bigblue
red一个是red然后他们各自有着个自的属性，颜色啊，大小什么的。
例子主要看第三，第四个&Text/&
充分解释了
居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承
这个概念！！
这篇就到这，希望你能有所收获
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？3070人阅读
React Native（5）
一、基本样式
（1）内联样式
在组件里面定义样式
style={{color:'orange', fontSize:20}} 小字号内联样式&
（2）外联样式
在组件里指向外面的样式
style={[styles.orange, styles.bigFontSize]}& 大字号外联样式&
（3）样式具有覆盖性
如果定义相同属性的样式，后面会覆盖前面的样式，例如，后面是红色前面是蓝色样式，最终是现实的蓝色：
style={[styles.red, styles.bigblue]}&红色被大蓝覆盖了&
（4）样式具有组合性
例如颜色颜色跟字体样式组合
案例代码：
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class LotsOfStyles extends Component {
render() {
&Text style={styles.red}&just red&/Text&
&Text style={styles.bigblue}&just bigblue&/Text&
&Text style={[styles.bigblue, styles.red]}&大蓝被红色覆盖了&/Text&
&Text style={[styles.red, styles.bigblue]}&红色被大蓝覆盖了&/Text&
&Text style={{color:'orange', fontSize:20}}& 小字号内联样式&/Text&
&Text style={[styles.orange, styles.bigFontSize]}& 大字号外联样式&/Text&
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
color: 'red',
bigFontSize:{
fontSize:40,
color:'orange',
AppRegistry.registerComponent('HelloWorld', () =& LotsOfStyles);
二、如何知道哪些组建支持哪些样式
作为web开发者用脚趾头都能闭眼写出来。如果我们需要知道该组件有哪些样式，又不想查手册，一个最为简单的方法是，在样式表里写错一个属性，比如我写一个没有的属性“border”。但是该属性必须写到样式的创建中去，而不能写为内联样式。写成内联样式，你是看不到报错提示的。我们改写成样式表创建类里面：
var HelloWorld = React.createClass({
render: function() {
&View style={styles.style_1}&
var styles = StyleSheet.create({
border: '1px solid red',
height:40,
borderWidth: 1,
borderColor: 'red',
这个时候你就能齐刷刷地看到样式表的报错和提示有哪些样式了，如下图所示：
上面已经展示了独立样式类了，那么样式类创建很简单，我们只需要使用React.StyleSheet来创建类。其实创建的类就是一个js对象而已。那么在组件上引用是这样的，就跟上面的代码一样。
三、Flexbox布局
其实，这样的css样式，作为web开发者一用就会，那么说说布局的事儿。Flexbox是css3里面引入的布局模型-弹性盒子模型，旨在通过弹性的方式来对其和分布容器中内容的空间，使其能够适应不同的屏幕宽度。React Native中的Flexbox是这个规范的一个子集。除去margin, padding, position等大家熟悉的web布局的话，最为重要的就是flexbox，目前支持的属性如下,有6个：
（1）先说说flex属性
var HelloWorld = React.createClass({
render: function() {
style={styles.style_0}&
style={styles.style_1}&&
style={styles.style_1}&&
style={{flex:10}}&
var styles = StyleSheet.create({
height:40,
borderWidth: 1,
borderColor: 'red',
当一个(元素)组件，定义了flex属性时，表示该元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩，其小于和等于0的时候不伸缩，例如：flex:0, flex:-1等。上面的代码，最外层的view是可伸缩的，因为没有兄弟节点和它抢占空间。里层是3个view,可以看到三个view的flex属性加起来是5+5+10=20,所以第一个view和第二个view分别占1／4伸缩空间， 最后一个view占据1／2空间，具体如下图：
（2）flexDirection
flexDirection在React-Native中只有两个属性，一个是row(横向伸缩)和column(纵向伸缩)。具体的效果可见如下代码：
var HelloWorld = React.createClass({
render: function() {
style={styles.style_0}&
style={styles.style_1}&
style={{marginTop:40, fontSize:25}}1／4高&
style={{marginTop:40, fontSize:25}}1／4高&
style={[styles.style_1, {flexDirection: 'column'}]}&
style={{marginTop:40, fontSize:25}}1／4高&
style={{marginTop:40, fontSize:25}}1／4高&
style={{flex:10, borderWidth: 1, borderColor: 'red',}}
style={{marginTop:40, fontSize:25}}1／2高&
var styles = StyleSheet.create({
flexDirection: 'row',
height:40,
borderWidth: 1,
borderColor: 'red',
（3）flexWrap：是否换行
（4）alignItems：
（5）justifyContent绝对布局
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class JustifyContentBasics extends Component {
render() {
// Try setting `justifyContent` to `center`.
// Try setting `flexDirection` to `row`.
flexDirection: 'column',
justifyContent: 'space-between',
style={{width: 50, height: 50, backgroundColor: 'powderblue'}}
style={{width: 50, height: 50, backgroundColor: 'skyblue'}}
style={{width: 50, height: 50, backgroundColor: 'steelblue'}}
AppRegistry.registerComponent('AwesomeProject', () =& JustifyContentBasics);
会根据水平还是垂直来布局，若干个元素均匀垂直或者水平布局满整个宽高。
（6）alignSelf:对齐方式
alignSelf的对齐方式主要有四种：flex-start、 flex-end、 center、
auto、 stretch。看看代码，应该就很清楚了：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1200756次
积分：17045
积分：17045
排名：第447名
原创：397篇
转载：221篇
评论：366条
我叫小未，网名Aladdin，主做U3D游戏程序，某普通本科学校毕业，但不甘于平庸，喜欢尝试，喜欢研究计算机技术，13年9月份开始工作，曾两年就职于巨人网络做游戏客户端程序，闲暇时间做过麦子学院在线讲师，做过独立开发，做过C#游戏服务器和.NET Web服务器，做过IOS原生开发，爱游戏，爱coding！
学习交流群:
阅读：8378
文章：10篇
阅读：16812
文章：12篇
阅读：13618
文章：24篇
阅读：97820
文章：13篇
阅读：21241
文章：31篇
阅读：70791
文章：34篇
阅读：50990
文章：20篇
阅读：41188
(2)(9)(2)(1)(3)(3)(1)(2)(1)(1)(4)(2)(2)(1)(1)(1)(3)(1)(1)(3)(1)(4)(2)(6)(17)(12)(13)(17)(12)(24)(32)(58)(42)(12)(48)(126)(33)(2)(2)(13)(9)(15)(5)(12)(14)(17)(5)(1)(1)(17)(2)(2)posts - 48,&
comments - 564,&
trackbacks - 0
ReactNative框架推出已经有一段时间了，相信很多小伙伴都在尝试实现Write Once, Run Anywhere的梦想，比如淘宝的ReactWeb等等，但是这些框架都局限于因为ReactNative本省的局限性，比如不支持CSS，不支持DOM操作，不支持选择器等等，而没有办法实现Js代码的全平台统一，现在通过全新的ReactMix框架，你可以让你的代码不仅可以在ReactNative上跑起来，实现安卓和iOS代码的统一，而且同样一份代码也可以在PC，H5上跑起来，到底有多神气？让我们来一探ReactMix框架()的奥秘吧！
ReactMix框架是基于ReactNative框架实现的，目标是完全兼容现有的H5开发方式的新一代框架ReactMix, 相信大家已经使用ReactNative去开发各自的应用有一段时间了，在这段时间，因为ReactNative的API频繁变动，且文档不全，而对于已经习惯写js,css开发的前端工作者来说，ReactNative又是一种新的开发模式，现在ReactMix就是为了解决大家现在遇到的这些问题而来了。
我们通过中间层，来使得ReactNative，能支持现有的HTML5的js+ dom api + css的开发模式，完美的支持常用的
css className
支持了css基本单位px, pt, rem
彻底解决了ios安卓尺寸样式不统一的问题，基于rem的度量方式，而且自适应不同的屏幕和分辨率，再也不用为未来更大屏的设备写兼容代码了
多个className的组合，或者className继承关系
css选择器，支持id, className, tag选择器
支持Dom选择器，你可以使用#id, .className, TagName去定位和查找节点
支持常用的js dom event api，支持例如onclick
支持常用的dom操作api，比如insertBefore, html等等，你经常使用的api
支持ReactNative代码的分割打包，这样你可以把reactnative的框架代码保存在app本地，但是业务代码通过在线直连的方法更新，保证网络传输量最小
首先我们来看一个例子
在ReactNative里面，在不同的设备，比如安卓或者iOS，都要有一个入口文件，比如iOS叫做index.ios.js，安卓叫做index.android.js，这个是默认的入口，当然你可以修改，对于reactmix来说，入口文件就是index.js
我们首先定义了一个navigator作为全局导航的存在，对于H5来说，我们实现了navigator控件的兼容
这样我们可以保证一套代码，只要API一致，就可以实现一样的功能，类似这样的原理，我们同步翻译常用的reactnative在h5开发中需要使用的控件
而在H5的实现上分别调用不同的对应实现
因为reactnative没有window对象，首先我们要给他实现一个window对象，然后把我们需要的常用的控件，挂到window上，这样我们在使用的时候就不需要再在具体的页面里面require了
比如Div 和Span
我们把这些常用的tag都挂在window之后，在我们的具体的页面里面，我们就可以不require，直接调用，就像这样
在H5开发里面，最常用的是block元素和inline元素，就是div和span，但是在reactnative里面没有，那么怎么办，我们就造一个
类似于shadow dom的做法，我们把自定义的组件Div同步翻译成reactnative的view，把span同步翻译成为text
然后我们还要解决className的兼容问题，要让reactnative支持常用的选择器，我们实现了
比如说这样的css，有id选择器，有className选择器，有className的继承，className的合并，我们要在reactnative里面实现，那么我们就要重构reactnative的自定义函数的render方法，在里面做文章
首先我们要让所有的元素都继承与一个基类，类似HTML的Dom Element
然后在render方法里面对于绕过reactnative自生的style，做增强的解析，来实现类似的CSS体系
同理Dom API也是一样，
另外对于reactnative来说，click是没有的，touch也是没有的，但是有类似的，需要2次封装，所以我们统一包装起来，对于h5开发者来说，就当做正常html+js开发既可以，只要正常实现touch的注册，我们给你类似于标准的Event Object
另外对于app开发和h5开发来说，每次设备的分辨率变大，或者出了新设备，都有一项工作叫做适配？对吧，而reactnative的样式是没有单位的，我们给他实现了单位比如px,pt,rem
而基于rem又实现了全平台统一的度量系统，就是说只要你是按照rem的定义的和模型，在同样大小分辨率的设备上，保证你的代码出来的效果是完全一样的
怎么样？对于这套框架，是不是有点动心了，快来体验一下吧，后续我们会陆续给大家详细解密ReactNative的核心原理，以及继续完善ReactMix，让标准的js代码可以平滑的在app中跑起来！
阅读(...) 评论()ReactNative学习笔记--View
ReactNative学习笔记--View
ReactNative学习笔记一 View
ReactNative学习好久了，现在感觉也该写点东西来总结一下了，先总结的就是UI的最常用的组件View。
View组件之布局
ReactNative的布局是Flex布局，flex是Flexible Box的缩写，意为&弹性布局&，具体的用法我就总结一些实用的，也可以移步至大神的博客/blog/2015/07/flex-grammar.html?utm_source=tuicool
容器默认存在两根轴：main axis(主轴)和cross axis(次轴)，主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
这里注意：主轴不一定就是水平方向或者竖直方向，跟容器的属性有关，flexDirection:'row'||'column'分别是设置水平方向主轴和竖直方向主轴，默认是竖直方向，可不设置，
flexDirection:
'row'(水平方向)||'column'(竖直方向)
'wrap'(换行)||'nowrap'(不换行，默认)
justifyContent
主轴上的对齐方式
'flex-start',
默认，main start对齐
'flex-end',
main end对齐
主轴线上居中
'space-between',
主轴线上两端对齐，项目之间的间隔都相等
'space-around'
主轴线上均匀分布，项目间距=2*项目边框间距
alignItems 次轴上的对齐方式
'flex-start',
次轴起点对齐
'flex-end'
次轴终点对齐
次轴方向居中
次轴方向平铺
alignSelf: 项目交叉轴方向自身对齐方式
'flex-start'
'flex-end'
flex:布局权重
flex=0的项目占用空间仅为内容所需空间，flex=1的项目会占据其余所有空间
子组件的主轴方向上的占比 1:2
Layout的其他属性
width: ReactPropTypes.number, 宽度
height: ReactPropTypes.number, 高度
top: ReactPropTypes.number,
left: ReactPropTypes.number,
right: ReactPropTypes.number,
bottom: ReactPropTypes.number,
在父容器里的偏移量 需设置position:'absolute'绝对布局
margin: ReactPropTypes.number,留边，留边的空间不属于容器或者项目自身空间
marginVertical: ReactPropTypes.number,
marginHorizontal: ReactPropTypes.number, 左右
marginTop: ReactPropTypes.number,
marginBottom: ReactPropTypes.number,
marginLeft: ReactPropTypes.number,
marginRight: ReactPropTypes.number,
padding: ReactPropTypes.number,填充，填充的空间属于容器或者项目自身空间
paddingVertical: ReactPropTypes.number,
paddingHorizontal: ReactPropTypes.number,
paddingTop: ReactPropTypes.number,
paddingBottom: ReactPropTypes.number,
paddingLeft: ReactPropTypes.number,
paddingRight: ReactPropTypes.number,
borderWidth: ReactPropTypes.number,
borderTopWidth: ReactPropTypes.number,
borderRightWidth: ReactPropTypes.number,
borderBottomWidth: ReactPropTypes.number,
borderLeftWidth: ReactPropTypes.number,
borderTopColor: ReactPropTypes.color,
上边框颜色
borderRightColor: ReactPropTypes.color,
borderBottomColor: ReactPropTypes.color,
borderLeftColor: ReactPropTypes.color,
backgroundColor:
borderRadius:
也可单独设置上圆角 下圆角
设置透明度
设置内容超过容器显示还是隐藏
elevation:
设置Z轴可以产生立体效果
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
相关标签：
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
移动开发工程师
这位童鞋很懒，什么也没有留下～～！
作者的热门手记
Copyright (C)
All Rights Reserved | 京ICP备 号-2