React Native View

2025 年 3 月 17 日 | 阅读 1 分钟

View 是 React Native 中构建用户界面的基本组件。它是一个容器，支持使用 flexbox 进行布局、样式、触摸处理和辅助功能控制。它直接映射到本机视图，类似于 React Native 应用程序运行的任何平台。无论使用 UIView, <div>, android.view, 等，它都会显示组件。

View 组件可以嵌套，包含其内部的其他视图。它可以包含 0 到多个任何类型的子组件。

注意：与 StyleSheet 结合使用的 View 组件使其更清晰且性能更好，但是，它也支持内联样式

View 的 Props

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

React Native View 示例

在此示例中，我们创建一个 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 State

React Native View

注意：与 StyleSheet 结合使用的 View 组件使其更清晰且性能更好，但是，它也支持内联样式

View 的 Props

React Native View 示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React Native View

注意：与 StyleSheet 结合使用的 View 组件使其更清晰且性能更好，但是，它也支持内联样式

View 的 Props

React Native View 示例

相关帖子

React Native Touchables

带动画的 ProgressBar

高度和宽度

React Native WebView

React Native Props

React Native 教程

React Native ListView

ProgressBarAndroid

第一个 App Hello World

React Native Style

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器