View 组件是React Native最基本的组件.绝大部分其他React Native 组件.
来看看示例代码:
...
class AwesomeProject extends Component {
render() {
return (
//根View
<View style={styles.container}>
<View style={styles.view1}
opacity={0.5}/>
<View style={styles.view2}
opacity={1}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: { //根View样式
flex: 1,
justifyContent:'space-around',// 子组件分散排列
alignItems:'center',
backgroundColor:'white'
},
view1:{
width:50,
height:50,
borderWidth:1,
borderColor:'green',
borderRadius:25,
backgroundColor:'red'
},
view2:{
width:50,
height:50,
borderWidth:2,
borderColor:'green',
borderRadius:25,
backgroundColor:'red'
}
});
...
运行结果:
开发者可以利用transform样式键设置实现组件的变形,从而实现文字或图像的变形.变形包括: translate(平移) ,scale(缩放) , rotate(旋转) , skew(倾斜)四种类型.
transform样式键设置的格式是:
transform:
[
{perspective: number},
{rotate: string},
{rotateX:string},
{rotateY: string},
{scale: number},
{scaleX: number},
{scaleY: number},
{translateX: number},
{translateY: number},
{skewX: string},
{skewY: string}
]
rotate控制目标整体旋转,于目标内部形状无关,目标内部不发生任何形变,而skew目标内部的形状会随倾斜而改变.
perspective元素与3D变形效果有关.
示例代码:
...
class AwesomeProject extends Component {
render() {
return (
//根View
<View style={styles.container}>
<Text style={styles.text1}>
第一个Text
</Text>
<Text style={styles.text2}>
第二个Text
</Text>
<Text style={styles.text3}>
第三个Text
</Text>
<Text style={styles.text4}>
第四个Text
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: { //根View样式
flex: 1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#F5FCFF'
},
text1:{
flex: 1,
alignItems:'center',
justifyContent:'center',
transform:[{rotate:'45deg'}] // 旋转45度
},
text2:{
flex: 1,
alignItems:'center',
justifyContent:'center',
transform:[{rotateX:'45deg'},{scale:2}] //x轴旋转45度 放大2倍
},
text3:{
flex: 1,
alignItems:'center',
justifyContent:'center',
transform:[{skewY:'45deg'}] //Y轴倾斜45度
},
text4:{
flex: 1,
alignItems:'center',
justifyContent:'center',
transform:[{scale:2},{translateX:50}] //X轴平移50 放大2倍
}
});
...
运行结果:
A组件有一个属性B的值是函数的引用,当某一个事件发生时,React Native框架通过这个属性的值回调这个函数, 为了简洁, 我们直接将提供的函数称为A组件的回调函数,这个属性B称为回调函数类型的属性, 比如我们之前接触过的 onPress 属性就是这样.
{
timeStamp : aNumber, //时间戳 , 1970年1月1日至今的毫秒数
nativeEvent: {
locationX: aNumber,
locationY: aNumber
}
}
更多精彩请关注微信公众账号likeDev,公众账号名称:爱上Android。
2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123