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={{ 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={{ 20, height: 20,}}/>
                <Button />
            </View>