react native 之页面布局

第一章 flexbox 布局

1.flexDirection:'row', 水平 flexDirection:'column',垂直

需要在父元素上设置这种属性才能实现flex. flex:1 会撑满整个屏幕.

demo:如果一行有3格,则所有的flex:1 ,这样会平分width;

在flexbox中一般view不用设置固定的高度,都是以子元素撑开父元素,设置相应的margin padding 之类的属性值 .

2.flexbox 中的width 与height 是没有单位的一般格式是 height: 20, 单位是手机根据屏幕自己改变的,跟rem有点相似.

3.在react native 布局中,样式的引入是以数组的形式引入的.

<Text style={[styles.navtext,styles.navtext]} onPress={() => navigator.push({name:'Index'})}>活动</Text>

4. 页面的横竖屏切换,出现滚动条,需要运用<scrollview>这个属性

5. 主页面需要引入代码中用到的相关组件与标签

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Navigator,
    AppRegistry,
} from 'react-native';

第二章 component

1. 可以将其中的一些<view> 以component拆开,让后以标签的形式引入组件

组件的输出
export default class NavComponent extends Component

export default = 'NavComponent'

元素的导入

import NavComponent from .... 

<NavComponent/>

2.<Navigator/> 标签是包括<view/> 这些标签的,不可以用component 的方式引入.

3.<ListView/> 属性,这个属性不会立即渲染页面,跟前前端的瀑布流相似,不同之处在于滚动条上端隐藏的页面会被自动切除,而不是隐藏.

第三章 props 与 state

1.props 是相关的属性值,比如<Img/> 标签的值,属性是不可以改变的.

2.state 表示数据,是可以改变的,store 是数据库,存储state.

3. 对于component,是需要初始化数据的,也就是state,其中super() 是写的,初始化系统的数据;

如果在component 外,则不需要这行代码,会报错.

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };

4.引入一个本地的json 文件,需要的就是props ,初始化数据,然后在渲染到页面中.

先用props 初始化数据:

 constructor(props) {
    super(props);

然后就是定义数据

<Header data={twitter[0].user}/>

之后header 标签中可以直接用 this.props.data. ...直接调用

<View style={[styles.row,styles.head]}>
                <Image source={{uri:this.props.data.avatar}} style={{width: 40, height: 40}}/>
                <View style={styles.headtext}>
                    <Text style={[styles.react,styles.textColor]}>{this.props.data.name} </Text>
                    <Text style={styles.reactjs}>@{this.props.data.handler}</Text>
                </View>
                <Image source={require('./icons/settings.png')} style={{width: 20, height: 20,}}/>
                <Button />
            </View>

react native 之页面布局

推荐阅读