react native 样式的继承和优先级

最新推荐文章于 2025-03-23 12:02:41 发布

reg183

最新推荐文章于 2025-03-23 12:02:41 发布

阅读量560

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/chendongpu/article/details/118089900

前端专栏收录该内容

257 篇文章

订阅专栏

本文介绍了使用React Native开发中如何运用样式创建动态界面，包括使用StyleSheet创建样式、控制文本颜色以及布局管理。通过实例展示了如何结合不同的视图组件和背景色，以实现为人民服务的主题。

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

在这里插入图片描述

import React from 'react';

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

const App=()=>{
    return (
        <>
            <View style={styles.container}>
                <View style={[styles.txt,{color:'#336'}]}>
                    <Text>为人民服务</Text>
                </View>
                <View style={styles.card}></View>

                <View style={{marginTop:10,marginBottom:10,height:100,backgroundColor:'blue'}}></View>

                <View style={[styles.card,{backgroundColor:'pink'}]}></View>
            </View>
        </>
    )
};
const styles=StyleSheet.create({
    container:{
        flex:1,
        padding:10,
        backgroundColor: '#eee'
    },
    card:{
        height:100,
        backgroundColor: '#fff'
    },
})

export default App;