Как установить одинаковое фоновое изображение для всех компонентов в React Native? - PullRequest
Новая
       17

Как установить одинаковое фоновое изображение для всех компонентов в React Native?

0 голосов
/ 17 апреля 2019

Доброе утро всем.Я начинаю с собственной реакции и хочу поместить одно и то же изображение в свое мобильное приложение, для каждого экрана (страницы) я делаю значок a, который заставляет мое изображение загружаться каждый раз, когда я меняю экраны, я хочу поместить одно и то же изображение изагрузите его для всех компонентов, чтобы изображение загружалось только один раз для всех экранов

. Я создал компонент 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>
        );
    }
}

ça ne marche pas

в результате появляется экран, изображение загружается, но сам компонент больше не загружается

1 Ответ

0 голосов
/ 17 апреля 2019

Вам потребуется добавить {this.props.children} в свой компонент Background, чтобы отобразить то, что вы передаете в компоненте Background из компонента Classement.

Вы можете посмотреть на этот вопрос, которыйони делают что-то похожее Что такое {this.props.children} и когда вы должны его использовать? .Документация для этого здесь https://reactjs.org/docs/composition-vs-inheritance.html#containment.

Надеюсь, что это может помочь вам!

...