View 是用于构建用户界面的React Native的基本组件。它是一个容器,通过flexbox,style,touch处理和辅助函数控件来支持布局。它直接映射到本地视图,类似于运行React Native应用程序的任何平台。无论使用UIView, <div>, android.view等,它都会显示组件。
视图组件可以嵌套,其中包含其他视图。它可以包含0到许多任何类型的子代。
onStartShouldSetResponder | accessibilityLabel | accessibilityHint | hitSlop |
nativeID | onAccessibilityTap | onLayout | onMagicTap |
onMoveShouldSetResponder | onMoveShouldSetResponderCapture | onResponderGrant | onResponderMove |
onResponderReject | onResponderRelease | onResponderTerminate | onResponderTerminationRequest |
accessible | onStartShouldSetResponderCapture | pointerEvents | removeClippedSubviews |
style | testID | accessibilityComponentType | accessibilityLiveRegion |
collapsable | importantForAccessibility | needsOffscreenAlphaCompositing | renderToHardwareTextureAndroid |
accessibilityRole | accessibilityStates | accessibilityTraits | accessibilityViewIsModal |
accessibilityElementsHidden | accessibilityIgnoresInvertColors | shouldRasterizeIOS |
在此示例中,我们创建一个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" } })
输出:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)