美文网首页
React Native之style

React Native之style

作者: 谢尔顿 | 来源:发表于2018-09-03 17:46 被阅读124次

示例代码:

import React, {Component} from 'react'

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

export default class LotsOfStyles extends Component<Props> {
    static navigationOptions = {
        // title: 'page 1',
        title: 'style',
    };

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.red}>just red</Text>
                <Text style={styles.bigblue}>just bigblue</Text>
                <Text style={[styles.bigblue,styles.red]}>bigblue,then red</Text>
                <Text style={[styles.red,styles.bigblue]}>red,then bigblue</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    bigblue: {
        color: 'blue',
        fontWeight: 'bold',
        fontSize: 30,
    },
    red: {
        color: 'red',
    },
});

可以设置单个,也可以用中括号组合起来。
效果图:


相关文章

网友评论

      本文标题:React Native之style

      本文链接:https://www.haomeiwen.com/subject/yzriwftx.html