Question

Good morning, everyone. I start in native react and I would like to put the same image in my mobile application, I make for each screes (page) a which makes my image load each time I change screens, what I want to do is put the same image and load it for all the components so the image loads only once for all the screens

what I did was create a background.js component that contains a that I export and import into other screens, but it doesn't work

Here's what I did in 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>
        );
    }
}

and then I import it into the other screens

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

ça ne marche pas

the result is a screen, the image loads but the component itself no longer loads

Answer 1

You will need to add {this.props.children} in your Background component to render what you are passing in the Background component from the Classement component.

You can look at this question, which they are doing something similar What is {this.props.children} and when you should use it?. The documentation for that is here https://reactjs.org/docs/composition-vs-inheritance.html#containment.

Hope it can help you!

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

1 个答案: