React-Native基础_2.样式Style

最新推荐文章于 2022-04-22 15:44:37 发布

CodingForAndroid

最新推荐文章于 2022-04-22 15:44:37 发布

阅读量348

点赞数

分类专栏： React Native+Flutter 文章标签： React 样式

本文链接：https://blog.csdn.net/u011733020/article/details/76100035

版权

React Native+Flutter 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

2.样式Style
基本使用
方式1 直接在View 上面写style 内容
       <View style={{
                backgroundColor: '#07811d',
                flex: 1
            }}>
                <Text>
                    Welcome to React Native!
                </Text>
            </View>
方式2 StyleSheet.create定义一个style 常量，然后直接使用常量中定义好的属性
export default class Day0718 extends Component {

    render() {
        return (
            <View style={styles.Container}>
                <Text style={styles.Text}>
                    Welcome to React Native!
                </Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    Container :{
        borderWidth :1,
        borderColor:'#c9382d',
        borderRadius:15,
        shadowColor:'#6435c9',
        shadowOpacity:0.6,
        shadowRadius:2,
        shadowOffset:{
            height:1,
            width:0,
        },
        margin:10,
        backgroundColor: '#c9382d',
        flex: 1,

    },
    Text:{
        color:'#6435c9',
        fontSize: 26,
        textAlign:'center',
        fontStyle:'italic',
        letterSpacing:2,
        lineHeight:33,
        fontFamily:'Helvetica Neue',
        fontWeight:'300',
        textDecorationLine:'underline',
        textDecorationStyle:'dashed',
    },

});

---------------欢迎各位大神加群

----------------Android交流群：230274309

-----------------------------期待大神们的到来

------------------------一---起分享，一起进步！需要你们