如何为React Native中的所有组件设置相同的背景图像？

Question

大家，早安。我从本机反应开始，我想在我的移动应用程序中放入相同的图像，我为每个screes（页面）制作一个每次更换屏幕时都会加载我的图像，我想要做的就是放置相同的图像和为所有组件加载它，因此图像只为所有屏幕加载一次

我所做的是创建一个background.js组件，其中包含我导出并导入到其他屏幕的组件，但它不起作用

这是我在background.js中所做的

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    KeyboardAvoidingView,
    AsyncStorage,
    TouchableOpacity,
    Dimensions,
    ImageBackground, ScrollView, StatusBar
} from 'react-native';
import Service from '../../service/base';
import bgImage from '../../assets/ToG.jpg'
import {Header} from "react-native-elements";

const service = new Service();

const { width : WIDTH } = Dimensions.get('window');

export default class Background extends React.Component {
    render() {
        return (
            <View style={styles.f}>
            <ImageBackground source={bgImage} style={styles.bgImage}>

            </ImageBackground>
            </View>
        );
    }
}

然后我将其导入其他屏幕

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    KeyboardAvoidingView,
    AsyncStorage,
    TouchableOpacity,
    Dimensions,
    ImageBackground, ScrollView, StatusBar
} from 'react-native';

import bgImage from '../../assets/ToG.jpg'
import Background from './Background'
import {
    Image,
    Header,
    Button,
} from "react-native-elements";
const {width : WIDTH} = Dimensions.get('window')
export default class Classement extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {
        return (
            <Background>
                <ScrollView>
                    <Header leftComponent={{
                        icon: 'menu',
                        size: 30,
                        color: '#fff',
                        fontWeight: 'bold',
                        onPress :() => this.props.navigation.openDrawer(),
                    }}
                            centerComponent={{ text: 'TOG', style: { color: '#fff' } }}
                            backgroundColor= "transparent">
                    </Header>
                    <StatusBar
                        barStyle="light-content"
                        animated={true}
                        backgroundColor="#6a51ae"/>
                    <KeyboardAvoidingView behavior='padding' style={styles.wrapper}>
                        <View style={styles.container}>
                            <Text style={styles.header}>Matchs</Text>
                            <Text style={styles.text}>
                                Bah y a rien à montrer p'tit chat, t'attends quoi pour rentrer une feuille de match ?                            </Text>
                        </View>
                    </KeyboardAvoidingView>
                </ScrollView>
            </Background>
        );
    }
}

它不起作用

结果是一个屏幕，图像加载但组件本身不再加载

Answer 1

您需要在{this.props.children}组件中添加Background，以便从Background组件渲染您在Classement组件中传递的内容。

你可以看看这个问题，他们正在做类似的What is {this.props.children} and when you should use it?。这里的文档是https://reactjs.org/docs/composition-vs-inheritance.html#containment。

希望它可以帮到你！