React Native 第四天

11、上中下分栏布局

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View} from 'react-native';export default class Main extends Component {    render() {        return (            <View style={styles.container}>                <View style={[styles.top, styles.public]}>                    <Text>{'top'}</Text>                </View>                <View style={[styles.center, styles.public]}>                    <Text>{'center'}</Text>                </View>                <View style={[styles.bottom, styles.public]}>                    <Text>{'bottom'}</Text>                </View>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1    },    top: {        height: 44,        backgroundColor: 'red'    },    center: {        flex:1,        backgroundColor: 'green'    },    bottom: {        height: 55,        backgroundColor: 'blue'    }});

实现了上中下分栏效果

12、Dimensions

用于获取手机屏幕的大小

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View} from 'react-native';var Dimensions = require('Dimensions');var {width, height} = Dimensions.get('window');export default class Main extends Component {    render() {        return (            <View style={styles.container}>                <Text>                    {'屏幕的宽度' + width + "\n"}                    {'屏幕的高度' + height + "\n"}                </Text>            </View>        );    }}

13、View组件

类似于Html中的div,具体可看RN中文网介绍
http://reactnative.cn/docs/0.44/view.html#content

14、九宫格布局

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image} from 'react-native';var Dimensions = require('Dimensions');var {width, height} = Dimensions.get('window');var arr = [    require("./images/smile.jpg"),    require("./images/smile.jpg"),    require("./images/smile.jpg"),    require("./images/smile.jpg"),    require("./images/smile.jpg"),    require("./images/smile.jpg"),    require("./images/smile.jpg"),    require("./images/smile.jpg"),    require("./images/smile.jpg"),    require("./images/smile.jpg")];export default class Main extends Component {    constructor(props) {        super(props);        this.state = {}    }    createImg() {        //计算格与格间的间距        //可用的空间 = 屏幕的宽度 - 3个格的宽度        var useWidth = width - (3 * 80);        //把可用空间分成4个等比例的距离        var leftAndBottom = useWidth / 4;        let data = [];        for (var i = 0; i < arr.length; i++) {            data.push(                <View key={i} style={[styles.imgView, {marginLeft: leftAndBottom, marginBottom: leftAndBottom}]}>                    <Image                        source={arr[i]}                        style={styles.img}                    ></Image>                </View>            );        }        return data;    }    render() {        return (            <View style={styles.container}>                {this.createImg()}            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        flexDirection: 'row',        flexWrap: 'wrap',    },    imgView: {        width: 80,        height: 80    },    img: {        width: 80,        height: 80    }});

15、Text组件

用于文本的显示,具体可查看RN中文网

export default class Main extends Component {    constructor(props) {        super(props);        this.state = {}    }    _onLayout(e) {        console.log(e.nativeEvent);    }    render() {        return (            <View style={styles.container}>                <Text ellipsizeMode={'head'}                      numberOfLines={1}                      onLayout={this._onLayout}                >{'内容'}</Text>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        flexDirection: 'row',        justifyContent: 'center',        alignItems: 'center'    }