View

参考文档

作为创建 UI 时最基础的组件，View 是一个支持 Flexbox 布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。不论在什么平台上，View 都会直接对应一个平台的原生视图，无论它是 UIView、 还是 android.view.View。
View 的设计初衷是和 StyleSheet 搭配使用，这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用。

合成触摸事件

用于 View 响应属性 (例如, onResponderMove), 合成触摸事件采用以下的格式:

• nativeEvent
  • changedTouches - 从上一次事件以来的触摸事件数组。
  • identifier - 触摸事件的 ID。
  • locationX -触摸事件相对元素位置的 X 坐标。
  • locationY - 触摸事件相对元素位置的 Y 坐标。
  • pageX - 触摸事件相对根元素位置的 X 坐标。
  • pageY - 触摸事件相对根元素位置的 Y 坐标。
  • target - 接收触摸事件的元素 ID.
  • timestamp - 触摸事件的时间标记，用来计算速度.
  • touches - 屏幕上所有当前触摸事件的数组.

查看 Props

示例

import React, { Component } from 'react';
import {  View,StyleSheet } from 'react-native';
export  class pageComponent extends Component {
    render() {
        return (
            // 尝试把`flexDirection`改为`column`看看
            <View style={styles.container}>
                <View style={styles.powderblue} />
                <View style={styles.skyblue} />
                <View style={styles.steelblue} />
        </View>
    );
    }
};
const styles = StyleSheet.create({
    container: {
        flex: 1, 
        flexDirection: 'row'
    },
    powderblue:{
        widtd: 50, 
        height: 50, 
        backgroundColor: 'powderblue'
    },
    skyblue:{
        widtd: 50, 
        height: 50, 
        backgroundColor: 'skyblue'
    },
    steelblue:{
        widtd: 50, 
        height: 50, 
        backgroundColor: 'steelblue'
    },
});

Example

示例

下面的例子创建了一个 View，包含了两个有颜色的方块和一个自定义的组件，并且设置了一个内边距：

import React, { Component } from 'react';
import {  View,StyleSheet } from 'react-native';
export  class pageComponent extends Component {
    render() {
        return (
            // 尝试把`flexDirection`改为`column`看看
            <View style={styles.container}>
                <View style={styles.powderblue} />
                <View style={styles.skyblue} />
                <View style={styles.steelblue} />
        </View>
    );
    }
};
const styles = StyleSheet.create({
    container: {
        flex: 1, 
        flexDirection: 'row'
    },
    powderblue:{
        widtd: 50, 
        height: 50, 
        backgroundColor: 'powderblue'
    },
    skyblue:{
        widtd: 50, 
        height: 50, 
        backgroundColor: 'skyblue'
    },
    steelblue:{
        widtd: 50, 
        height: 50, 
        backgroundColor: 'steelblue'
    },
});