React Native 三:样式

index.android.js文件
import React, {
    … …
} from ‘react-native‘;
class AwesomeProject extends Component {
  render() {
    return (
      <View>
            //所有核心组件都可以接受style属性
           <Text style={styles.base}>Declare Style</Text>
            //接受数组形式的多个style
           <Text style={[styles.base, styles.background]}>Declare Style</Text>
            //根据某些条件选择性的添加样式，否定型取值如false，undefined和null则会被忽略
            <View style={[styles.base, true && styles.active]}/>
            //可以在render方法中创建样式，多个值冲突的时候，右边的元素优先级最高
            <View style={[styles.background, styles.base, { width:80, height:80}]}/>
       </View>
    );
  }
}
//声明样式
var styles = StyleSheet.create({
  base: {
    width: 100,
    height: 38,
  },
  background: {
    backgroundColor: ‘#cccccc‘,
  },
  active: {
    borderWidth: 2,
    borderColor: ‘#00ff00‘,
  },
});
AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

 index.android.js文件：
     import React, {
         … …   
     } from ‘react-native‘;
     class AwesomeProject extends Component {
         render() {
              return (
                   <View style={styles.flexcontain}>
                       <View style={styles.flexitem}>
                         <Text>1</Text>
                       </View>
                       <View style={styles.flexitem}>
                         <Text>2</Text>
                       </View>
                       <View style={styles.flexitem}>
                         <Text>3</Text>
                       </View>
                       <View style={styles.flexitem}>
                         <Text>4</Text>
                       </View>
                       <View style={[styles.flexitem,styles.item5]}>
                         <Text>5</Text>
                       </View>
                </View>
              );
            }
     }
     var styles = StyleSheet.create({
          flexcontain: {
               width:300,
              height:300,
              borderWidth:1,
              borderColor:‘blue‘,
              flexDirection:‘row‘,
              top:100,
              left:100,
         },
         flexitem: {
              width:50,
              height:50,
              borderWidth:1,
              borderColor:‘white‘,
              backgroundColor:‘gray‘,
              justifyContent:‘center‘,
              alignItems:‘center‘,
       },
       item5: {
         alignSelf:‘stretch‘,
       },
     });
     AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);