2.ReactNative Properties|States|Styles 笔记
原文地址:http://reactnative.cn/docs/0.31/props.html#content
1. property:
如下代码所示
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);
上面 <>中间包裹的对象,source={ xxx } 其中source就是图片的属性,代表它的源地址. 类似于HTML中src="http://..."
后面｛｝中间标示的是属性的value(值)。通过后面style={} 属性推测,里面｛｝中间的value因该是存在属性变量或者对象。
{{width: 193, height: 110}} 里面有点类似于一个json数据，也可以理解为一个表达式。 因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。
我们自定义组件也可以使用props(property),通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴,只需在render函数中引用this.props，然后按需处理。 举个栗子：
import React,｛Component ｝from ‘react’；
import ｛AppRegister，Text，View｝ form 'react-native';
class Greeting extends Component {
render() (
return (<text>hello {this.props.name}!</text>
);
}
} class LotsOfGreetings extends Component {
render() {
return(
<View style={{alignItems:'center'}}>
<Greeting name = 'Rexxar'/>
<Greeting name = 'Jaina'/>
<Greeting name = 'Valeera'/>
);
}
}
AppRegistry.registerComponent('LotsOfGreetings',()=>LotsOfGreetings);
2. State：
如果需要在constuctor中国年初始化state,需要在修改时调用setState方法。
示例,闪烁文字效果。
文字内容可以在组件创建时指定,所以对应文字的隐藏和闪烁状态是随着时间变化的。
import React,{ component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);
}
render() {
// 根据当前showText的值决定是否显示text内容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
class BlinkApp extends Component {
render() {
return (
<View>
<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' />
</View>
);
}
}
AppRegistry.registerComponent('BlinkApp', () => BlinkApp);3. 样式
后设置的样式会比先设置的样式优先级高
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class LotsOfStyles extends Component {
render() {
return (
<View>
<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>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);
常见的做法是按顺序声明和使用style属性，以借鉴CSS中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）。
4. 宽度与高度
可以将其定义为style属性,在｛｝中写成json格式字符串。 可以通过点语法,定义内连样式。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>
);
}
};
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
5. 弹性样式
flex=1，组件占据整个剩余空间,如果有多个组件,name这些组件平分剩余空间。import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FlexDimensionsBasics extends Component {
render() {
return (
// 试试去掉父View中的`flex: 1`。
// 则父View不再具有尺寸，因此子组件也无法再撑开。
// 然后再用`height: 300`来代替父View的`flex: 1`试试看？
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} />
<View style={{flex: 2, backgroundColor: 'skyblue'}} />
<View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
6. 使用Flexbox进行布局：
Flexbox可以在不同屏幕尺寸上提供一致的布局结构。
一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。
React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，alignItems的默认值是stretch而不是flex-start，以及flex只能指定一个数字值。
在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。 <View style={{flex: 1, flexDirection: 'row'}}>
justifyContent可以决定其子元素沿着主轴的排列方式, flex－start,center，flex-end,space-around以及space-bettween.
在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。
