React Native 樣式(1)

hither發表於2017-12-13

React Native 樣式(1)

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

export default class LotsOfStyles extends Component {
  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,thne red</Text>
      <Text style={[styles.red,styles.bigblue]}>red , then bigblue</Text>
    </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    bigblue:{
        color: 'blue',
        fontWeight:'bold',
        fontSize:30,
   } ,
    red:{
        color:'red',
    },
});
複製程式碼

相關文章