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使用指南

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"]style使用内连方式 style={{flex:1,borderColor:'red'}}style包裹使用style={[styles.style1,styles.style2]}同时包裹样式和内连style={[styles.style1,{flex:1,borderWidth:1}]}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>