react-native 宽度和高度

指定宽度和高度

react-native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class WidthHeight extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return(
            <View>
                <View style={{ width: 100,height: 50,backgroundColor: 'red' }}>
                    <Text>美丽的夜晚</Text>
                </View>
                <View style={{ width: 200,height: 100,backgroundColor: 'blue' }}>
                    <Text>我在等你</Text>
                </View>
                <View style={{ width: 300,height: 150,backgroundColor: 'yellow' }}>
                    <Text>好喜欢你</Text>
                </View>
            </View>
        )
    }
}
AppRegistry.registerComponent('xiao', () => WidthHeight);

弹性(Flex)宽高

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class WidthHeight extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return(
            <View style={{ flex: 1}}>
                <View style={{ flex: 1,backgroundColor: 'red' }}>
                    <Text>美丽的夜晚</Text>
                </View>
                <View style={{ flex: 1,backgroundColor: 'blue' }}>
                    <Text>我在等你</Text>
                </View>
                <View style={{ flex: 1,backgroundColor: 'yellow' }}>
                    <Text>好喜欢这夜色</Text>
                </View>
            </View>
        )
    }
}
AppRegistry.registerComponent('xiao', () => WidthHeight);

上面用的是flex布局，有不懂的同学可以去看阮一峰的教程。