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

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

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>

React Native style属性重载

ReactNative之style使用指南

相关文章