什么是 React Native 中的渲染道具模式？

React Native 是一种基于 javascript 的语言，用于设计 UI（用户界面）。在本文中，我们将学习如何在 React Native 中渲染道具模式。

Render Props 是 ReactJS 中的一种技术，用于在 React 组件之间使用值为函数的 prop 共享代码。子组件将渲染道具作为一个函数并调用它们，而不是实现自己的渲染逻辑。简而言之，我们将父组件的一个函数作为渲染道具传递给子组件，子组件调用该函数而不是实现自己的逻辑。

要创建一个 React-Native 应用程序，我们将使用 Expo CLI 版本，它可以更流畅地运行您的 React Native 应用程序。

Expo：它是通用 React 应用程序的框架和平台。它是一组围绕 React Native 和原生平台构建的工具和服务，可帮助您使用相同的 JavaScript/TypeScript 代码库在 iOS、Android 和 Web 应用程序上开发、构建、部署和快速迭代。

以下是上述方法的分步实施。

第 1 步：打开终端并运行以下命令。

npm install -g expo-cli

第 2 步：现在 expo-cli 已全局安装，因此您可以通过运行以下命令来创建项目文件夹。

expo init "projectName"

第 3 步：现在进入创建的文件夹并使用以下命令启动服务器。

cd "projectName"

项目结构：它将如下所示

运行应用程序的步骤：要执行 React-Native 程序，请使用以下命令。

npm start web

示例：在此示例中，按钮作为道具从父组件传递。按下该按钮会显示一条警报消息。

现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

Javascript

import * as React from 'react';
import { Button,Alert,Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
  
function ChildComponentWithProps(props) {
  return (
    
      I am Child Component
      {props.renderProps()}
    
  );
}
  
function ParentComponentPassingProps() {
  return (
     {
        return (
          
              Alert.alert('Hi Geek!! ')}
              />
          
        );
      }}
    />
  );
}
  
export default function App() {
  return (
    
      GeeksforGeeks
      Rendering prop pattern in React-native
      
    
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  GFG: {
    color: 'green',
    fontWeight: 'bold',
  },
});

输出：