React-Native开发总结-html层面上的问题

来源：互联网发布：销售网络评价与改进编辑：程序博客网时间：2024/05/29 13:04

最近更新时间：2017年10月29日14:50:47

做前端开发，熟悉了HTML+CSS+JS的开发模式，如果不看RN原理，直接用老一套的逻辑思维上手RN，可能会大跌眼镜。高效开发的前提，需要学习并理解RN的原理。本文主要记录内容是，关于RN开发的HTML层面上的问题。

1、RN的HTML

RN提供的组件(在HTML中叫标签)中常用的有：

View-视图容器，可用属性：style={[Styles.nav,{borderColor:'#0ff'}]}、onLayout={(event)=>{this.getViewInfo}}

getViewInfo(event){console.log(event.nativeEvent.layout.height)}//获取视图容器的宽高属性

Text-文本容器，可用属性：style={{textAlign:'center'}]}、numberOfLines={2}该组件设置固定宽度后超出的文字会在第二行的末尾以省略号的形式显示

TouchableOpacity-按钮/可触发点击事件的区域，可用属性：onPress={()=>{this.todo()}}、activeOpacity={1}点击触发后内容没有消隐效果

ScrollView和FlatList-滚动列表，属性较多，不罗列；

Image-图片容器，可用属性：source={require('.../.../img/top.png')}

Modal-模态框，可作为toast的无需操作2秒消失的警告或提示信息，也可作为有交互按钮的操作提示对话框；

2、RN的CSS

样式声明：const StylesComponent = StyleSheet.create({

text:{fontSize: 14}，

textColor:{color:'#fff'}

});

样式使用的四种形式：

RN的盒子模型：box-sizing: border-box，width包括border和padding；

CSS属性的书写方式为驼峰式，如fontSize；

布局方式为flexbox，弹性盒子模型，在 React-Native 中的flexbox 是css3中flexbox的一个子集，并不支持所有的flexbox属性；关于更高级的布局方案，需要在实际项目中多练习多总结；

常用的CSS属性：官方给出的全部属性如下，

React-native Valid style props: [

"alignContent",

"alignItems",//父元素的样式，子元素在当前侧轴方向上的对齐方式；如flexDirection为row时，center表示子元素垂直居中；子元素如果设置了alignSelf属性，则会重写该属性

"alignSelf",//子元素的样式，设置该元素单独在侧轴方向上的对齐方式

"aspectRatio",//元素宽高比，RN独有，设置了图片的宽度后，只需设置好这个属性，就不需要设置图片的高度

"backfaceVisibility",

"backgroundColor",

"borderBottomColor",

"borderBottomLeftRadius",

"borderBottomRightRadius",

"borderBottomWidth",

"borderColor",

"borderLeftColor",

"borderLeftWidth",

"borderRadius",

"borderRightColor",

"borderRightWidth",

"borderStyle",

"borderTopColor",

"borderTopLeftRadius",

"borderTopRightRadius",

"borderTopWidth",

"borderWidth",

"bottom",

"color",

"decomposedMatrix",

"direction",

"display",//控制组件显示与隐藏，隐藏后不占位

"elevation",

"flex",

"flexBasis",

"flexDirection",//默认为column，子元素垂直排列，可设置为row，子元素水平排列

"flexGrow",

"flexShrink",

"flexWrap",

"fontFamily",

"fontSize",

"fontStyle",

"fontVariant",

"fontWeight",

"height",

"includeFontPadding",

"justifyContent",

"left",

"letterSpacing",

"lineHeight",

"margin",

"marginBottom",

"marginHorizontal",

"marginLeft",

"marginRight",

"marginTop",

"marginVertical",

"maxHeight",

"maxWidth",

"minHeight",

"minWidth",

"opacity",

"overflow",

"overlayColor",

"padding",

"paddingBottom",

"paddingHorizontal",

"paddingLeft",

"paddingRight",

"paddingTop",

"paddingVertical",

"position",//RN元素定位类型只有两种：relative相对于正常文档流进行偏移；absolute相对于父元素进行绝对定位，不管父元素设置position属性与否；

"resizeMode”,（cover图片铺满）

"right",

"rotation",

"scaleX",

"scaleY",

"shadowColor",

"shadowOffset",

"shadowOpacity",

"shadowRadius",

"textAlign",

"textAlignVertical",

"textDecorationColor",

"textDecorationLine",

"textDecorationStyle",

"textShadowColor",

"textShadowOffset",

"textShadowRadius",

"tintColor",

"top",

"transform",transform:[{rotate:'30deg'},{translate:[-waterMarkW,0]}]

"transformMatrix",

"translateX",

"translateY",

"width",

"writingDirection",

"zIndex"

]

3、常规布局方案

需求一：如下图所示，右侧布局为flex布局，子元素水平布局，并且会每三个元素自动换行，两遍间距10px，中间间距16px；

Label组件实现代码如下：

class Label extends Component{

constructor(props){
super(props);
this.state = {
selected: false
}
}

clicked(){
if(this.state.selected){
this.setState({
selected: false,
});
}else{
this.setState({
selected: true,
});
}
}

render(){
return(
<TouchableOpacity onPress={() => {this.clicked()}} activeOpacity={1}>
<View
style={{borderWidth:D(1), width:D(64), height:D(24), borderRadius:D(2), alignItems:'center', justifyContent:'center', marginTop:D(16),
backgroundColor: this.state.selected ? '#fff' : '#f5f5f5',
borderColor: this.state.selected ? '#ff6700' : '#f5f5f5',
marginRight: (this.props.index+1)%3 == 0 ? D(10) : D(16),
}}>
<Text style={{
color: this.state.selected ? '#ff6700' : '#757575',
}}>{this.props.item}</Text>
</View>
</TouchableOpacity>
)
}
}

最后，关于更多布局上的交互实践动态布局问题，请查看我的博文React-Native开发总结-前端常规需求实现方案

阅读全文

0 0