如何为所有标签设置相同的背景图像？ （反应本机）

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

您可以做的是使用高阶分量模式。您可以找到有关该模式here

的更多信息

基本思想是，您具有返回组件的函数，该函数接受参数并组成组件。

您可以在此处放置重复的代码，只需使用您选择的组件调用该函数即可。它将返回新创建的具有选项卡背景图像的组件。

您可以这样写：

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);

Answer 2

您应该使用此代码

 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,
      }
    });