React Native AppRegistry

正如我们所知，组件是一个返回一些JSX的JavaScript函数。但是这些组件不能自行运行，我们必须注册它们以便在我们的设备上渲染。我们必须明确告诉React Native一个入口点，从那里它应该开始渲染。

这个入口点是通过“AppRegistry”来指定的。AppRegistry帮助我们注册React Native应用程序的入口点。我们必须在我们的React应用程序中至少注册一个组件。

先决条件：

具备ReactJS和React Native的基本知识。
NodeJs应该已经安装在您的系统上。
具备HTML，CSS和JS的基本知识。

让我们通过一些示例来看一下AppRegistry的用法。

创建应用程序：

请按照以下步骤创建一个应用程序：

步骤1：

当您的终端打开时，执行以下命令将安装expo-cli。

npm install -g expo-cli

步骤2： 现在通过以下命令创建一个项目。

expo init Project

步骤3： 现在进入项目文件夹，即 Project 文件夹

cd Project

项目结构： 项目的结构应该如下所示：

React Native AppRegistry

示例1： 在索引.js中，我们将创建一个函数式组件并使用AppRegistry进行注册。myComponent是一个简单的组件，在屏幕上返回消息“Hello World！学习AppRegistry！”。

import React from "react"; 
import { AppRegistry, StyleSheet, Text, View }  
    from "react-native"; 
      
// import Constants from 'expo-constants'; 
// code for myComponent which is showing Hello World 
function myComponent() { 
    return ( 
        <View style={styles.container}> 
            <Text style={styles.fontStyle}> 
                Hello World! Learning AppRegistry!!!! 
            </Text> 
        </View> 
    ); 
} 
  
// Styles for Text and view 
const styles = StyleSheet.create({ 
    container: { 
        flex: 1, 
        justifyContent: 'center', 
        textAlign: 'center', 
        backgroundColor: '#ecf0f1', 
        padding: 8, 
    }, 
    fontStyle: { 
        margin: 24, 
        fontSize: 30, 
        fontWeight: 'bold', 
        textAlign: 'center', 
    }, 
}); 
  
// "project" is the name of the main react-native Folder 
// the second argument is an arrow function  
// returning myComponent defined above 
AppRegistry.registerComponent("project", () => myComponent); 
  
// runApplication() loads the javascript bundle and runs the app. 
AppRegistry.runApplication("project", { 
    rootTag: document.getElementById("root") 
});

运行应用程序的步骤： 打开终端并输入以下命令。

npm start

输出：

React Native AppRegistry

为了定义我们应用的入口点，我们使用了AppRegistry.registerComponent()

AppRegistry.registerComponent("folderName", () => componentName);

第一个参数: “folderName” 是主要的react-native应用程序名称
第二个参数: 是返回你想要在设备上渲染的组件的函数。

注册组件的步骤:

从react-native导入AppRegistry
创建一个组件
使用AppRegistry.registerComponent()函数将组件注册到AppRegistry。
runApplication() 加载javascript包并运行应用程序。

示例2: 让我们在单独的文件中创建一个单独的组件，并在index.js文件中注册它。App.js默认导出一个函数组件，该组件返回“Hello World!! Using AppRegistry”。

import React from "react"; 
import { StyleSheet, Text, View } from "react-native"; 
  
  
function App() { 
    return ( 
        <View style={styles.app}> 
            <View style={styles.header}> 
                <Text style={styles.code}> 
                    Hello World !! Using AppRegistry 
                </Text> 
            </View> 
        </View> 
    ); 
} 
  
// Styles for Text and View components 
const styles = StyleSheet.create({ 
    app: { 
        marginHorizontal: "auto", 
        maxWidth: 500 
    }, 
    header: { 
        padding: 20 
    }, 
    code: { 
        fontFamily: "monospace, monospace", 
        fontSize: 30 
    } 
}); 
  
export default App;

index.js

import App from "./App"; 
import { AppRegistry, StyleSheet, Text, View }  
    from "react-native"; 
  
// "project" is the name of the main react-native Folder 
// the second argument is an arrow function returning 
// App, which is imported above 
AppRegistry.registerComponent("project", () => App); 
  
// runApplication() loads the javascript bundle  
// and runs the app. 
AppRegistry.runApplication("project", { 
    rootTag: document.getElementById("root") 
});

输出:

React Native AppRegistry