Что такое шаблон рендеринга в React Native?

Опубликовано: 11 Августа, 2022

React Native — это язык на основе javascript, который используется для разработки пользовательского интерфейса (пользовательского интерфейса). В этой статье мы узнаем о рендеринге опорных шаблонов в React Native.

Render Props — это метод в ReactJS для совместного использования кода между компонентами React с использованием реквизита, значением которого является функция. Дочерний компонент принимает реквизиты рендеринга как функцию и вызывает их вместо реализации собственной логики рендеринга. Короче говоря, мы передаем функцию от родительского компонента дочернему компоненту в качестве реквизита рендеринга, и дочерний компонент вызывает эту функцию вместо реализации собственной логики.

Чтобы создать приложение React-Native, мы будем использовать версию Expo CLI, которая будет намного более плавной для запуска ваших приложений React Native.

Expo: Это фреймворк и платформа для универсальных приложений React. Это набор инструментов и сервисов, созданных на основе React Native и нативных платформ, которые помогают разрабатывать, создавать, развертывать и быстро выполнять итерации для iOS, Android и веб-приложений на основе одной кодовой базы JavaScript/TypeScript.

Ниже приведена пошаговая реализация описанного выше подхода.

Шаг 1: Откройте терминал и выполните приведенную ниже команду.

npm install -g expo-cli

Шаг 2: Теперь expo-cli установлен глобально, поэтому вы можете создать папку проекта, выполнив приведенную ниже команду.

expo init "projectName"

Шаг 3: Теперь перейдите в созданную папку и запустите сервер с помощью следующей команды.

cd "projectName"

Структура проекта: это будет выглядеть следующим образом

Шаг для запуска приложения : для запуска программы React-Native используйте следующую команду.

npm start web

Пример: в этом примере кнопка передается как реквизит из родительского компонента. Предупредительное сообщение отображается при нажатии этой кнопки.

Теперь запишите следующий код в файл App.js. Здесь приложение является нашим компонентом по умолчанию, в котором мы написали наш код.

Javascript

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

Выход:

JavaScript Picked

Что такое шаблон рендеринга в React Native?

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ