ReactNative View 组件_rn glview-CSDN博客

本文链接：https://blog.csdn.net/GL_MINE_CSDN/article/details/73647795

本文介绍了一个使用React Native进行UI布局的具体实例，展示了如何利用Flexbox布局来组织元素，并通过样式表定义不同部分的外观和间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ReactNative View组件。

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

let RnDemo = React.createClass({
    render: function () {
        return (
            <View style={[styles.container, styles.flex]}>
                <View style={styles.item}>

                    <View style={[styles.flex, styles.center]}>
                        <Text>酒店</Text>
                    </View>

                    <View style={[styles.flex, styles.lineLeftRight]}>
                        <View style={[styles.flex,styles.center, styles.lineCenter]}>
                            <Text>海外酒店</Text>
                        </View>
                        <View style={[styles.flex, styles.center]}>
                            <Text>特价酒店</Text>
                        </View>
                    </View>

                    <View style={styles.flex}>
                        <View style={[styles.flex, styles.center, styles.lineCenter]}>
                            <Text>团购</Text>
                        </View>

                        <View style={[styles.flex, styles.center]}>
                            <Text>民俗、客栈</Text>
                        </View>
                    </View>

                </View>
            </View>
        );
    }
});
let styles = StyleSheet.create({
    container: {
        marginTop: 25,
        backgroundColor: "#F2F2F2",
    },
    //多个子组件都需要设置
    flex: {
        flex: 1,
    },
    //多个子组件都需要设置
    center: {
        justifyContent: "center",
        alignItems: "center"
    },
    item: {
        flexDirection: "row",
        backgroundColor: "#FF607C",
        marginTop: 5,
        marginLeft: 5,
        marginRight: 5,
        height: 80,
        borderRadius: 5,
    },
    //给中间的区域 设置左右边线
    lineLeftRight: {
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderColor: "white",
    },
    lineCenter: {
        borderBottomWidth: 1,
        borderColor: "white",
    }
});