如何在 React Native 中导入组件？

React Native 是 Facebook 开发的一个框架，用于在一种通用语言（即 JavaScript）下为 Android 和 iOS 创建原生风格的应用程序。最初，Facebook 只开发了 React Native 来支持 iOS。但是，由于最近支持 Android 操作系统，该库现在可以为这两个平台呈现移动 UI。

组件：基本上我们知道 React Applications 是交互式组件的集合，使用 React Native，您可以使用类或函数来制作组件。最初，类组件是唯一可以拥有状态的组件。但是自从 React Hooks API 的引入，你可以给函数组件添加状态等等。组件是 React Native 中的构建块，类似于收集所有 UI 元素的容器，并有助于在 Android 或 iOS 设备上以原生 UI 的形式在前台呈现细节。 React 自带了 Text、View、Image、ScrollView、TextInput 等多个内置组件。

导入组件： JavaScript 的世界一直在变化，最新的 ECMAScript 之一现在提供了更高级的模块导入模式。在以前的版本中，开发人员必须使用module.exports = { // 在此处定义您的导出。 } ，但是现在每个模块都可以有一个默认导出或者可以不导出任何命名参数，如果可以导出，那么肯定可以导入相同的。因此，在最近的 ECMAScript 版本中，每个模块都可以导入默认导出或几个命名参数，甚至是一个有效的组合。

方法： React Native 使用与上述相同的功能，您可以将每个 React 组件视为一个模块本身。因此，可以导入 React Native 组件，这是要执行的基本操作之一。在 React 中，我们使用关键字import和from来导入特定模块或命名参数。让我们看看我们可以在 React Native Application 中使用导入操作的不同方式。

导入默认导出：React Native 中的每个模块至少需要一个默认导出。为了从文件中导入默认导出，我们可以使用文件的位置并在其前面使用关键字 import，或者我们可以为导入指定一个特定的名称，即 COMP_NAME，其语法如下。
```
import COMP_NAME from LOCATION
```
导入命名值：每个模块都可以没有命名参数，如果我们需要导入一个，我们应该使用如下语法。
```
import { COMP_NAME } from LOCATION
```
同样，对于多个导入，我们可以使用逗号 ( , ) 分隔符来分隔花括号内的两个参数名称。如下所示。
```
import { COMP_NAME1, COMP_NAME2, ... , COMP_NAMEn } from LOCATION
```
导入默认导出和命名值的组合：标题清楚地表明我们需要看到的是相同的语法。为了导入组合，我们应该使用以下语法。
```
import GIVEN_NAME, { PARA_NAME, ... } from ADDRESS
```

现在让我们从实现开始：首先，我们需要在我们的系统中创建 React Native 应用程序，为了创建 React Native 应用程序，我们需要按照以下步骤操作。

先决条件：我们需要在系统中安装 Node.js 以运行 Node Package Manager (npm) 命令。

在 Windows 上安装 Node.js
在 Linux 上安装 Node.js

第 1 步：安装 React Native 应用程序。
```
npm install -g create-react-native-app
```
第 2 步：创建 React Native 项目。
```
create-react-native-app myReactNativeApp
```
步骤 3：使用以下命令启动服务器。
```
npm run android
```

项目结构：以上命令将在您的系统指定位置创建一个名为 react native 应用程序文件夹的myReactNativeApp 。如下所示。

示例 1：在此示例中，我们从react-native 库中导入 React Native 的两个基本内置组件Text和View 。

App.js

import * as React from "react";
  
// Importing components from react-native library.
import { View, Text } from "react-native";
  
export default function App() {
  return (
  
    // Using react-natives built in components.
    
      
        GeeksForGeeks
      
    
  );
}

App.js

import * as React from "react";
  
// Importing components from react-native library.
import { Alert, View, StyleSheet, Button } from "react-native";
  
export default function App() {
  
  const onPressButton = () => {
    Alert.alert('Welcome To GeeksForGeeks..')
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 0.5,
      justifyContent: 'center',
      alignItems: 'center',
  
    }
  })
  
  return (
  
    // Using react-natives built in components.

运行应用程序的步骤：使用以下命令启动服务器。

npm run android

输出：

示例 2：在此示例中，我们将使用 react-native Button 组件创建一个显示警报组件的响应式按钮。

应用程序.js

import * as React from "react";
  
// Importing components from react-native library.
import { Alert, View, StyleSheet, Button } from "react-native";
  
export default function App() {
  
  const onPressButton = () => {
    Alert.alert('Welcome To GeeksForGeeks..')
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 0.5,
      justifyContent: 'center',
      alignItems: 'center',
  
    }
  })
  
  return (
  
    // Using react-natives built in components.

运行应用程序的步骤：使用以下命令启动服务器。

npm run android

输出：