Как установить одинаковое фоновое изображение для всех вкладок?(Реагируй Родной)

Question

Я хотел бы использовать одно и то же фоновое изображение для всех моих вкладок без необходимости копировать и вставлять код на каждую из моих вкладок.

Как создать один код, который управляет фоновым изображением всех моих вкладок?

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ImageBackground, Button } from 'react-native';

export default class Youtube extends Component {
  render() {
    return (

      <ImageBackground source={require("../assets/images/ici.jpg")} style={{width: '100%', height: '100%'}}>
          <Text style={{color: 'white', fontSize: 40}}>
          Hello{"\n"} 
          </Text>
      </ImageBackground> 
    );}}

Answer 1

Вы должны использовать этот код

 import * as React from 'react';
    import { 
      Text,
      View, 
      Image,
      StyleSheet,  
      ImageBackground, 
      Dimensions
    } from 'react-native';

    const WrapperView = (childs) =>{
      return (
          <ImageBackground source={require("../assets/images/ici.jpg")} style={{width: '100%', height: '100%'}}>
            <Text style={{color: 'white', fontSize: 40}}>
              Hello{"\n"} 
              {childs && childs}
            </Text>
          </ImageBackground> 
        )
    }

    const {
      width: MAX_WIDTH,
      height: MAX_HEIGHT,
    } = Dimensions.get('window');

    export default class Youtube extends React.Component {

      constructor(props){
        super(props)
        this.state={
          bcksNumber: 10, // change this for your number of bckgrounds
        }
      }

      callOneBackGround = () => {
        return (
          <WrapperView>
          </WrapperView>
        )
      }

      renderMultipleBackgrounds = () =>{ 
        const { bckNumber } = this.state
        for(var i = 0; i < bckNumber, i++ ){
          this.callOneBackGround()
        }
      } 

      render() {
        const { childsNumber } = this.state
        return (
          <View style={styles.mainView}>
          {this.renderMultipleBackgrounds(childsNumber)}
          </View>             
        );
      }
    }

    const styles = StyleSheet.create({
      mainView:{
        width: MAX_WIDTH,
        height: MAX_HEIGHT,
      }
    });

Answer 2

Что вы можете сделать, это использовать шаблон компонента High order.Вы можете найти больше информации об этом шаблоне здесь

Основная идея состоит в том, что у вас есть функция, которая возвращает компонент, эта функция принимает параметры и позволяет вам составлять ваш компонент.

Вы можете поместить дубликат кода здесь, просто вызовите функцию с выбранным вами компонентом.Он вернет вновь созданный компонент с фоновым изображением для вашей вкладки.

Вы можете написать что-то вроде этого:

function withBackground(WrappedComponent) {
  return class extends React.Component {
    render() {
      return (
        <ImageBackground
          source={require("../assets/images/picture.jpg")}
          style={{ width: "100%", height: "100%" }}
        >
          <WrappedComponent {...this.props} />
        </ImageBackground>
      );
    }
  };
}

И вы можете использовать его так:

const YoutubeWithBackground = withBackground(Youtube);