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

Posted 2023-02-23

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

【英文标题】：How to set the same background image for all components in React Native?

【发布时间】：2019-09-07 03:32:42

【问题描述】：

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

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

一夜暴富

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

【参考方案1】：

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

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

希望对你有帮助！

【讨论】：

谢谢..我阅读了文档并理解了这个概念，但由于我的用法与 tutos 上的不同，所以效果不佳。你能帮我提供一个示例代码吗