React Native style属性重载

let styles = StyleSheet.create({
popupContainer: {
flex: 1,
position: 'absolute',
top: 0,
left: 0,
justifyContent: 'center',
alignItems: 'center',
width: screen.width,
height: screen.height,
overflow: 'hidden',
backgroundColor: 'rgba(00, 00, 00, 0)',
},
overlay: {
flex: 1,
position: 'absolute',
top: 0,
left: 0,
width: screen.width,
height: screen.height,
backgroundColor: '#000',
opacity: .5,
},
tipBoxView: {
backgroundColor: '#fff',
justifyContent: 'center',
alignItems: 'center',
width: screen.width - 50,
borderRadius: 12,
overflow: 'hidden',
},
tipBox: {
flex: 1,
paddingTop: 15,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
tipTitleBox: {
height: 30,
width: screen.width - 50,
justifyContent: 'center',
alignItems: 'center',
},
tipTitle: {
fontSize: 19,
fontWeight: '500',
textAlign: 'center',
},
tipContentBox: {
flex: 1,
flexDirection: 'column',
marginBottom: 15,
marginTop: 10,
justifyContent: 'center',
alignItems: 'center',
},
tipContent: {
fontSize: 16,
marginBottom: 5,
textAlign: 'center',
},
line: {
height: screen.pixel,
width: screen.width - 50,
backgroundColor: '#ddd',
},
btnBox: {
width: screen.width - 50,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: 50,
},
btnTextBox: {
flex: 1,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
btnLine: {
height: 50,
width: screen.pixel,
backgroundColor: '#ddd',
},
btnText: {
textAlign: 'center',
fontSize: 16,
color: '#149be0',
},
hidden: {
position: 'absolute',
height: 0,
width: 0,
top: 0,
left: 0,
},
});


if(Platform.OS === 'ios'){
styles = {
...styles,
tipTitle: {
fontSize: 20,
fontWeight: '500',
textAlign: 'center',
},
tipContent: {
fontSize: 16,
marginTop: 3,
marginBottom: 7,
textAlign: 'center',
},
}
}

ReactNative之style使用指南

1. ReactNative中能使用的css样式有哪些呢
   Valid style props: [

     "alignItems",

     "alignSelf",

     "backfaceVisibility",

     "backgroundColor",

     "borderBottomColor",

     "borderBottomLeftRadius",

     "borderBottomRightRadius",

     "borderBottomWidth",

     "borderColor",

     "borderLeftColor",

     "borderLeftWidth",

     "borderRadius",

     "borderRightColor",

     "borderRightWidth",

     "borderStyle",

     "borderTopColor",

     "borderTopLeftRadius",

     "borderTopRightRadius",

     "borderTopWidth",

     "borderWidth",

     "bottom",

     "color",

     "elevation",

     "flex",

     "flexDirection",

     "flexWrap",

     "fontFamily",

     "fontSize",

     "fontStyle",

     "fontWeight",

     "height",

     "justifyContent",

     "left",

     "letterSpacing",

     "lineHeight",

     "margin",

     "marginBottom",

     "marginHorizontal",

     "marginLeft",

     "marginRight",

     "marginTop",

     "marginVertical",

     "opacity",

     "overflow",

     "overlayColor",

     "padding",

     "paddingBottom",

     "paddingHorizontal",

     "paddingLeft",

     "paddingRight",

     "paddingTop",

     "paddingVertical",

     "position",

     "resizeMode",

     "right",

     "rotation",

     "scaleX",

     "scaleY",

     "shadowColor",

     "shadowOffset",

     "shadowOpacity",

     "shadowRadius",

     "textAlign",

     "textAlignVertical",

     "textDecorationColor",

     "textDecorationLine",

     "textDecorationStyle",

     "textShadowColor",

     "textShadowOffset",

     "textShadowRadius",

     "tintColor",

     "top",

     "transform",

     "transformMatrix",

     "translateX",

     "translateY",

     "width",

     "writingDirection"]

2. style使用内连方式 style={{flex:1,borderColor:'red'}}
3. style包裹使用style={[styles.style1,styles.style2]}
4. 同时包裹样式和内连style={[styles.style1,{flex:1,borderWidth:1}]}

5. StyleSheet提供了一种类似CSS样式表的抽象。

   创建一个样式表：

   var styles = StyleSheet.create({
     container: {
       borderRadius: 4,
       borderWidth: 0.5,
       borderColor: '#d6d7da',
     },
     title: {
       fontSize: 19, fontWeight: 'bold', }, activeTitle: { color: 'red', }, }); 

   使用一个样式表：

   <View style={styles.container}>
     <Text style={[styles.title, this.props.isActive && styles.activeTitle]} /> </View>