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

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

技术教程推荐

技术领导力实战笔记 -〔TGO鲲鹏会〕

机器学习40讲 -〔王天一〕

软件测试52讲 -〔茹炳晟〕

玩转Git三剑客 -〔苏玲〕

DevOps实战笔记 -〔石雪峰〕

安全攻防技能30讲 -〔何为舟〕

软件设计之美 -〔郑晔〕

徐昊 · TDD项目实战70讲 -〔徐昊〕

大型Android系统重构实战 -〔黄俊彬〕

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