Javascript 如何为所有选项卡设置相同的背景图像？（本地反应）

我想为我的所有选项卡使用相同的背景图像，而不必在每个选项卡上复制粘贴代码

如何使用一个代码来管理我所有选项卡的背景图像

import React，{Component}来自'React'；
从“react native”导入{文本、视图、样式表、图像、图像背景、按钮}；
导出默认类扩展组件{
render（）{
返回(
你好{“\n”}
)}

您可以做的是使用高阶组件模式。您可以找到有关该模式的更多信息

其基本思想是，您有一个返回组件的函数，该函数接受参数并让您组成组件

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

你可以这样写：

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

---

您应该使用此代码

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

import*as React from'React'；
导入{
文本，
看法
形象,，
样式表，
图像背景，
尺寸
}从“反应本机”；
const WrapperView=（childs）=>{
返回(
你好{“\n”}
{childs&&childs}
)
}
常数{
宽度：最大宽度，
高度：最大高度，
}=Dimensions.get（'window'）；
导出默认类。组件{
建造师（道具）{
超级（道具）
这个州={
bcksNumber:10，//将此更改为您的bckgrounds数
}
}
callOneBackGround=（）=>{
返回(
)
}
renderMultipleBackgrounds=（）=>{
const{bckNumber}=this.state
对于（变量i=0；i

Hi，你想让背景视图动态呈现孩子们吗？是的，我是法国人，如果你想复制并通过函数，我们可以用法语切换，现在创建组件，就像const YoutubeWithBackground=withBackground（Youtube）；