ReactNative 样式

Carlos.Guo

于 2017-06-23 14:39:32 发布

阅读量309

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ReactNative 文章标签： reactnative 样式

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

ReactNative 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在React Native中实现复杂的视图样式，并通过具体代码示例展示了如何利用样式表组合来控制不同层级组件的样式优先级。

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

这些就建立在搭建好ReactNative环境之后进行开发的。

样式：

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput,
    Image,
} from 'react-native';
//控件的引用  此处使用的是 ES6的新特性  

import MyNavigatorPassValue from "./views/MyNavigatorPassValue"

/**1、样式
 *
 */
let RnDemo = React.createClass({
    render: function () {
        return (
            <View style={styles.container}>
                <View style={[styles.top, styles.border]}></View>
                <View style={[styles.bottom, styles.border, {borderWidth: 5}]}></View>
            </View>
        );
    }
});
/*
 定义样式 区别  样式组合时 越往后优先级越高
 */
let styles = StyleSheet.create({
    //外层view
    container: {
        marginTop: 25,
        marginLeft: 30,
        backgroundColor: "red",
        width: 300,
        height: 400,
    },
    //上层view
    top: {
        backgroundColor: "green",
        width: 280,
        height: 250,
        margin: 10,
    },
    //下层view
    bottom: {
        backgroundColor: "yellow",
        width: 280,
        height: 110,
        margin: 10,
    },
    border: {
        borderWidth: 3,
        borderColor: "black",
    }
});