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

Question

大家早上好。我从本机反应开始，我想在我的移动应用程序中放置相同的图像，我为每个屏幕（页面）制作一个，这使得我的图像在每次更换屏幕时加载，我想要做的是放置相同的图像和为所有组件加载它，以便图像只为所有屏幕加载一次

我所做的是创建一个 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

您需要在 Background 组件中添加 {this.props.children} 以呈现您从 Classement 组件传递到 Background 组件的内容。

你可以看看这个问题，他们在做类似的事情. The documentation for that is here https://reactjs.org/docs/composition-vs-inheritance.html#containment。

希望对您有所帮助！

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

How to set the same background image for all components in React Native?

components

background

image

react-native

react-native-navigation