React Native - View

React Native - View 首页 / React Native入门教程 / React Native - View

View 是用于构建用户界面的React Native的基本组件。它是一个容器,通过flexbox,style,touch处理和辅助函数控件来支持布局。它直接映射到本地视图,类似于运行React Native应用程序的任何平台。无论使用UIView, <div>, android.view等,它都会显示组件。

视图组件可以嵌套,其中包含其他视图。它可以包含0到许多任何类型的子代。

视图属性

onStartShouldSetResponderaccessibilityLabelaccessibilityHinthitSlop
nativeIDonAccessibilityTaponLayoutonMagicTap
onMoveShouldSetResponderonMoveShouldSetResponderCaptureonResponderGrantonResponderMove
onResponderRejectonResponderReleaseonResponderTerminateonResponderTerminationRequest
accessibleonStartShouldSetResponderCapturepointerEventsremoveClippedSubviews
styletestIDaccessibilityComponentTypeaccessibilityLiveRegion
collapsableimportantForAccessibilityneedsOffscreenAlphaCompositingrenderToHardwareTextureAndroid
accessibilityRoleaccessibilityStatesaccessibilityTraitsaccessibilityViewIsModal
accessibilityElementsHiddenaccessibilityIgnoresInvertColorsshouldRasterizeIOS

视图示例

在此示例中,我们创建一个View组件,该组件包含两个彩色框和一个文本组件,该组件在一行中具有高度和宽度。

app.js

import React, { Component } from 'react'
import {StyleSheet,View, Text} from 'react-native'

export default class SwitchExample extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={{backgroundColor: 'blue', flex: 0.3}} />
                <View style={{backgroundColor: 'red', flex: 0.5}} />
                <Text style={{fontSize: 18}}>View Example</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create ({
     container: {
         flex: 1,
         flexDirection: 'row',
         height: 100,
         width: "80%",
         backgroundColor:"#5ead97"
     }
})

输出:

React Native View

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

深入剖析Kubernetes -〔张磊〕

TypeScript开发实战 -〔梁宵〕

架构实战案例解析 -〔王庆友〕

如何看懂一幅画 -〔罗桂霞〕

WebAssembly入门课 -〔于航〕

体验设计案例课 -〔炒炒〕

MySQL 必知必会 -〔朱晓峰〕

Spring编程常见错误50例 -〔傅健〕

如何读懂一首诗 -〔王天博〕

好记忆不如烂笔头。留下您的足迹吧 :)