React-Native1

React Native

React Native常用组件之View

1. JSX和组件的概念

React的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。
传统的创建方式是：

var newBox = document.createElement('div');
newBox.className = 'box';
$('main').appendChild(newBox);

但是这样的代码可读性并不好，于是React发明了JSX，利用我们熟悉的HTML语法来创建虚拟DOM：

var root = (
    <div className="box">
        <div className="pic">
            <img src="images/1.jpg"/>
        </div>
    </div>
);

在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响。因此JSX本身并不是什么高深的技术，可以说只是一个比较高级但是很直观的语法糖。

2. View组件中常见的属性

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

Flexbox 弹性布局
Transforms  动画属性
backfaceVisibility enum('visible', 'hidden')    定义界面翻转的时候是否可见
backgroundColor color
borderBottomColor color
borderBottomLeftRadius number
borderBottomRightRadius number
borderBottomWidth number
borderColor color
borderLeftColor color
borderLeftWidth number
borderRadius number
borderRightColor color
borderRightWidth number
borderStyle enum('solid', 'dotted', 'dashed')
borderTopColor color
borderTopLeftRadius number
borderTopRightRadius number
borderTopWidth number
borderWidth number
opacity number 设置透明度，取值从0-1；
overflow enum('visible', 'hidden')  设置内容超出容器部分是显示还是隐藏；
elevation number 高度   设置Z轴，可产生立体效果。

3. Flex布局

container: {
    // 权重
    flex:1,
    // 背景色
    backgroundColor:'purple',
    // 上边距
    marginTop:20,
    // item的排列方向
    flexDirection:'row',
    // 对齐方式
    justifyContent:'flex-start',
    // 侧轴的对齐方式
    alignItems:'center',
    // 一行放不下的排列方式
    flexWrap:'wrap',
    // item的侧轴对齐方式,可覆盖alignItems
    alignSelf:'flex-start'
}

4.获取屏幕的宽度，高度和分辨率

var Dimensions = require("Dimensions");

export default class ThreeDemo extends Component {
    render(){
        return(
            <View style={style3.container}>
                <Text>当前屏幕的宽度:{Dimensions.get('window').width}</Text>
                <Text>当前屏幕的高度:{Dimensions.get('window').height}</Text>
                <Text>当前屏幕的分辨率:{Dimensions.get('window').scale}</Text>
            </View>
        );
    }
}

const style3 = StyleSheet.create({
    container: {
        // 权重
        flex:1,
        // 背景色
        backgroundColor:'purple',
        // 对齐方式
        justifyContent:'center',
        // 侧轴的对齐方式
        alignItems:'center',
        // 一行放不下的排列方式
        flexWrap:'wrap',
    }
});