大家好,我是贰妹子,希望我的博客可以帮到你。
- View组件中常见的属性
React Native组件View,其作用等同于iOS中的UIView, Android中的android.view,或是网页中的<div>标签,它是所有组件的父组件。
- Flexbox——弹性布局
- Transforms 动画属性
- backfaceVisibility enum('visible', 'hidden') 定义界面翻转的时候是否可见
- opacity number 设置透明度,取值从0-1;
- overflow enum('visible', 'hidden') 设置内容超出容器部分是显示还是隐藏;
- elevation number 高度 设置Z轴,可产生立体效果。
- 一个简单的入门小例子
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
View, //所以的布局要被View包裹
Text, //文本
Image, //图片
FlatList, //列表
TextInput, //输入框
Button, //按钮
} from 'react-native';
class ViewData extends Component{
render(){
return(
<View style={styles.ViewStyle}>
<Text> 大家好,我是贰小妹儿 </Text>
</View>
)
}
}
const styles = StyleSheet.create({
ViewStyle: {
flexDirection: 'row', //主轴的方向
justifyContent: 'center' //主轴的对齐方式
},
)}
在React Native开发中,更加推荐我们采用StyleSheet来进行组件的布局,这样的话,代码在结构上会更加的清晰、也有利于后期维护。
当然,在开发中会根据具体情况来灵活运用。