反应原生视图组件

在本文中，我们将了解如何在 react-native 中创建视图组件。为此，我们将使用 React Native View 组件。它基本上是一个小容器，支持带有 flexbox、样式、一些触摸处理和可访问性控件的布局。无论是 UIView、

、android.view 等，在 React Native 运行的任何平台上，视图都直接映射到等效的原生视图。

该组件被设计为嵌套在其他视图中，并且可以有 0 到多个任何类型的子视图。

句法：

视图组件的道具：

onStartShouldSetResponder：该属性是一个函数类型，用于在用户触摸组件时启动视图。
可访问性：此属性用于指示视图是可访问性元素，默认值为 true。
可访问性标签：此属性用于覆盖用户与元素交互时屏幕阅读器读取的文本。
可访问性提示：此道具可帮助用户了解当他们对可访问性元素执行操作时，当从可访问性标签中不清楚结果时会发生什么。
AccessibilityRole：此属性用于将组件的用途传达给辅助技术的用户。
可访问性状态：用于向辅助技术的用户描述组件的当前状态。
AccessibilityValue：这个prop用来表示一个组件的当前值
AccessibilityActions：此属性允许辅助技术以编程方式调用组件的操作。
onAccessibilityAction：此属性用于在用户执行可访问性操作时调用。
onAccessibilityTap：如果系统将在用户执行可访问性轻击手势时调用此函数，则使用此道具，可访问性道具应为真。
onMagicTap：如果在用户执行魔术点击手势时系统将调用此函数，则使用此道具，可访问道具应为真。
onAccessibilityEscape：如果在用户执行退出手势时系统将调用此函数，则使用此道具，可访问道具应为真。
AccessibilityViewIsModal：这个属性指示 VoiceOver 是否应该忽略视图中作为接收者兄弟的元素。
accessibilityElementsHidden：此属性指示此可访问性元素中包含的可访问性元素是否隐藏。
AccessibilityIgnoresInvertColors：当颜色反转打开时，指示此视图应该或不应该反转的这个道具。
AccessibilityLiveRegion：这个属性向无障碍服务指示当这个视图改变时是否应该通知用户。
importantForAccessibility：此属性控制视图对可访问性的重要性，如果它触发可访问性事件以及是否向查询屏幕的可访问性服务报告，它仅适用于 Android。
hitSlop：这个属性定义了一个触摸事件可以从视图开始多远
nativeID：此道具用于从本地类中定位此视图。
onLayout：此道具用于在安装和布局更改时激活视图。
onMoveShouldSetResponder：当 View 不是响应者时，每次触摸移动都会调用该属性。
onMoveShouldSetResponderCapture：如果父 View 想要阻止子 View 成为移动的响应者，那么它应该有这个返回 true 的处理程序。
onResponderGrant：该道具使 View 响应触摸事件。
onResponderMove：这个道具是用来激活用户手指移动的响应者View。
onResponderReject：如果响应者已经处于活动状态，则此属性将阻止其他人的请求。
onResponderRelease：此道具用于在触摸结束时触发 View。
onResponderTerminate：此道具用于从视图中获取响应者。
onResponderTerminationRequest：如果任何 View 想要成为响应者，并且那个时候任何其他 View 都是响应者，那么这个道具将要求这个活动的 View 释放它的响应者。
onStartShouldSetResponderCapture：如果父 View 想要阻止子 View 在触摸开始时成为响应者，则将使用此道具。
pointerEvents：该属性用于控制 View 是否可以作为触摸事件的目标。
removeClippedSubviews：这个道具用于当有很多子视图时滚动内容，其中大部分是离屏的。
style：此属性用于设置视图组件的样式。
testID：此道具用于在端到端测试中定位此视图。
可折叠：这个道具用于作为优化，仅用于布局其子级或不绘制任何内容的视图可能会自动从本机层次结构中删除。
needsOffscreenAlphaCompositing：此属性定义视图需要在屏幕外渲染并与 alpha 合成，以保持正确的颜色和混合行为。
renderToHardwareTextureAndroid：
shouldRasterizeIOS：这个属性定义了在合成之前应该将视图渲染为位图，它在 ios 设备上很有用。
nextFocusDown：此属性用于设置用户向下导航时接收焦点的下一个视图。
nextFocusForward：此属性用于设置用户向前导航时接收焦点的下一个视图。
nextFocusLeft：此属性用于设置当用户向左导航时下一个视图接收焦点。
nextFocusRight：此属性用于设置当用户向右导航时下一个视图接收焦点。
nextFocusUp：这个道具用于设置当用户向上导航时下一个视图接收焦点。
focusable：此属性用于将 View 定义为可以使用非触摸输入设备获得焦点。

现在让我们从实现开始：

第 1 步：打开终端并通过以下命令安装 expo-cli。
```
npm install -g expo-cli
```
第2步：现在通过以下命令创建一个项目。
```
expo init myapp
```
第 3 步：现在进入您的项目文件夹，即 myapp
```
cd myapp
```

项目结构：

示例：现在让我们实现视图组件。在这里，我们在该组件中创建了一个视图组件，我们可以放置任何 API，但在这里我们将放置一个警报按钮，当有人单击该按钮时，会弹出一个警报。

App.js

import React from 'react';
import { StyleSheet,
        Text,
        View,
        Button,
        Alert
        } from 'react-native';
  
export default function App() {
  
// Alert function
const alert = ()=>{
    Alert.alert(
    "GeeksforGeeks",
    "A Computer Science Portal",
    [
        {
        text: "Cancel",
        },
        {
        text: "Agree",
        }
    ]
    );
}
  
return (

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考： https://reactnative.dev/docs/view