ReactNative—View组件

大家好，我是贰妹子，希望我的博客可以帮到你。

• View组件中常见的属性

       React Native组件View，其作用等同于iOS中的UIView, Android中的android.view，或是网页中的<div>标签，它是所有组件的父组件。

1. Flexbox——弹性布局
2. Transforms  动画属性
3. backfaceVisibility enum('visible', 'hidden')    定义界面翻转的时候是否可见
4. opacity number 设置透明度，取值从0-1；
5. overflow enum('visible', 'hidden')  设置内容超出容器部分是显示还是隐藏；
6. 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来进行组件的布局，这样的话，代码在结构上会更加的清晰、也有利于后期维护。

    当然，在开发中会根据具体情况来灵活运用。