Component
Component：组件，使用extends React.Component创建的类为组件。? componentWillMount()还可以用constructor来代替：
class Label extends React.Component{
constructor(props) {
super(props);
}
render(){
}
}
props与state
props属性：
组件可以定义初始值，自己不可更改props属性值，只允许从父组件中传递过来：
// 父组件
class ParentComponent extends React.Component{
render(){
return(<Child name="name">);
}
}
// 子组件
class Child extends React.Component{
render(){
return(<Text>{this.props.name}</Text>);
}
}
父组件向子组件传递name="name"的props属性，在子组件中使用this.props.name引用此属性。
属性类型prop type和默认属性 default prop可以通过类中的 static来声明：
class Demo extends React.Component {
// 默认props
static defaultProps = {
autoPlay: false,
maxLoops: 10,
}
// propTypes用于验证转入的props，当向 props 传入无效数据时，JavaScript 控制台会抛出警告
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
}
state = {
loopsRemaining: this.props.maxLoops,
}
}
state属性：
组件用来改变自己状态的属性，通常使用setState({key:value})来改变属性值触发界面刷新，不能使用this.state.xxx来直接改变。 在开发中，一般不会在定时器函数（setInterval、setTimeout等）中来操作state。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。
对于经常改变的数据且需要刷新界面显示，可以使用state。对于不需要改变的属性值可以使用props。React Native建议由顶层的父组件定义state值，并将state值作为子组件的props属性值传递给子组件，这样可以保持单一的数据传递。
生命周期
我们把组件从装载，到渲染，再到卸载当做一次生命周期，也就是组件的生存状态从装载开始到卸载为止，期间可以根据属性的变化进行多次渲染。 生命周期的三种状态：
- Mounting：装载 1.componentWillMount() 2.componentDidMount()
- Updating：渲染 1.componentWillReceiveProps() 2.shouldComponentUpdate() 3.componentWillUpdate() 4.componentDidUpdate()
- Unmounting：卸载 componentWillUnmount()
componentWillMount()，组件开始装载之前调用，在一次生命周期中只会执行一次。
componentDidMount()，组件完成装载之后立即调用，在一次生命周期中只会执行一次。在这里开始就可以对组件进行各种操作了，比如在组件装载完成后要显示的时候执行动画。
componentWillUpdate(object nextProps, object nextState)，当新的props或者state被接受时,组件属性更新之前调用,这个方法不会被初始渲染调用。不能在这个方法里使用 this.setState()。如果你要响应一个prop变化来更新state,使用componentWillReceiveProps 来替代。
componentDidUpdate(object prevProps, object prevState)，组件属性更新之后调用，每次属性更新都会调用，这个方法不会被初始渲染调用。
componentWillUnmount()，组件卸载之前调用，在这个方法里执行一些必要的清理操作,比如timers。
组件属性更改时会调用以下方法，在一次生命周期中可以执行多次：
componentWillReceiveProps(object nextProps)，已加载组件收到新的props时被调用.这个方法不会为最初的渲染调用。
shouldComponentUpdate(object nextProps, object nextState)，组件判断是否重新渲染时调用，当新的props或者state被收到,在渲染前被调用.这个方法不会在最初的渲染被调用。
并没有类似的 componentWillReceiveState ()的方法。一个即将到来的 prop 转变可能会导致一个 state 变化,但是反之不是。如果你需要实现一个对 state 变化相应的操作，使用 componentWillUpdate()。
如果 shouldComponentUpdate () 返回false, render() 会在下次state变化前被完全跳过。另外componentWillUpdate () 和 componentDidUpdate() 将不会被调用。
默认情况下shouldComponentUpdate() 总是返回 true 来阻止当 state 突变时的细微bug。
页面跳转
初始化第一个页面：
import SeatPageComponent from './SeatPageComponent';
import MainPageComponent from './MainPageComponent';
import TrainListComponent from './TrainListComponent';
class MainPage extends React.Component {
render() {
let defaultName = 'MainPageComponent';
let defaultComponent = MainPageComponent;
return (
<Navigator
// 指定默认页面
initialRoute={{ name: defaultName, component: defaultComponent }}
// 配置页面间跳转动画
configureScene={(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
// 初始化默认页面
renderScene={(route, navigator) => {
let Component = route.component;
// 将navigator作为props传递到下一个页面
return <Component {...route.params} navigator={navigator} />
}} />
);
}
}
跳转到下一页面：
jumpToNext(){
const { navigator } = this.props;// 由上一个页面传递过来
if(navigator) {
navigator.push({
name: 'SeatPageComponent',
component: SeatPageComponent,// 下一个页面
});
}
}
返回上一个页面：
_back(){
const { navigator } = this.props;
if(navigator) {
navigator.pop();
}
}
页面间通信
例如：从A页面打开B页面 A通过route.params将参数传递给B：
jumpToNext(){
const { navigator } = this.props;// 由上一个页面传递过来
if(navigator) {
navigator.push({
name: 'SeatPageComponent',
component: SeatPageComponent,// 下一个页面
params: { // 需要传递个下一个页面的参数,第二个页面使用this.props.xxx获取参数
id: 123,
title: this.state.title,
},
});
}
}
A通过route.params传递回调方法或者A的引用来让B将数据传回给A：
// A页面
jumpToNext(){
const { navigator } = this.props;// 由上一个页面传递过来
if(navigator) {
let that = this;// this作用域，参见下文函数绑定
navigator.push({
name: 'SeatPageComponent',
component: SeatPageComponent,// 下一个页面
params: { // 需要传递个下一个页面的参数,第二个页面使用this.props.xxx获取参数
title: '测试',
getName: function(name) {that.setState({ name: name })}
},
});
}
}
// B页面
_back(){
const { navigator } = this.props;
if(this.props.getName){
this.props.getName('测试');
}
if(navigator) {
navigator.pop();
}
}
flexbox布局
什么是flexbox布局
React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。 RN利用flexBox模型布局, 也就是在手机屏幕上对组件进行排列.利用flexBox模型,开发者可以开发出动态宽高的自适应的UI布局。
flexbox中的样式主要有以下几类:
- 位置及宽、高相关的样式键
- 容器属性,决定子组件排列规则的键
- 元素属性,决定组件显示规则的键
- 边框、空隙与填充
布局样式
- position
relative(默认) 表示当前描述的位置是相对定位，不可以使用bottom和right。top和left表示当前组件距离上一个同级组件的最上(左)距离absolute表示当前描述的位置是绝对定位，top、bottom、left、right，描述当前组件的位置距离父组件最（上下、左、右)的距离 - width
width、height、maxHeight、maxWidth、minHeight、minWidth组件的宽和高是可以动态改变的,所以可以设置宽和高的最大和最小值 - flexDirection
row：横向排列，主轴为水平方向；?column：竖直排列，主轴为垂直方向。 - flexWrap
?wrap?和?nowrap?(默认值)?，当水平或垂直布局时，如果子View放不下可选?wrap?实现自动换行, - justifyContent 子布局在主轴方向位置 enum(
flex- start,flex-end,center,space-between,space-around) - alignItems 子布局在侧轴方向位置 enum(
flex-start,flex-end,center,stretch) - flex 权重，默认值是0当它的值为1时，子组件将自动缩放以适应父组件剩下的空白空间。
- alignSelf 忽略它的父组件样式中的
alignItems的取值，而对该组件使用alignSelf键对应的规则。 enum(auto,flex-start,flex-end,center,stretch) - padding
- margin
盒模型.png
网友评论