Компонент ImageBackground в качестве контейнера маршрутизатора реагирующей навигации, скрывающего все дочерние компоненты - PullRequest
Новая
       50

Компонент ImageBackground в качестве контейнера маршрутизатора реагирующей навигации, скрывающего все дочерние компоненты

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

Я хочу установить фоновое изображение для всех экранов моего собственного собственного реагирующего приложения,

Я использую компонент ImageBackground на верхнем уровне дерева компонентов следующим образом: 

export default class App extends React.Component {
render(){
 return(
    <View style={{ flex: 1 }}>
        <ImageBackground source={require('../assets/app-bg.png')} style={{width: '100%', height: '100%', flex: 1, zIndex: 0, resizeMode: 'cover' }}>
            <Router />
        </ImageBackground>
    </View>)
}
}

и у меня есть дочерний компонент, который является маршрутизатором от реакции-навигации следующим образом: 

class LandingPage extends React.Component {
    render(){
return(
        <View style={{flex: 1, zIndex: 999}}>
        <Text>here is landing page></Text>
        </View>
      )
    }
  }

const RouterNavigator = createAppContainer(createStackNavigator({
    Landing: {
        screen: Landing,
        navigationOptions:{
            header: null
        }
    }
}

export default class Router extends React.Component {
    render() {
        return <RouterNavigator style={{flex: 1}}/>
    }
}

проблема в том, что фоновое изображение рендерится, а дочерний компонент LandingPage скрыт, даже если онтакже отображается!

1 Ответ

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

Просто посмотрите на этот пример. Помогает ли это вам достичь того, что вы пытались сделать? 

import * as React from 'react';
import { Text, View, StyleSheet, ImageBackground } from 'react-native';
import { Constants } from 'expo';

import AssetExample from './components/AssetExample';
import { createAppContainer, createStackNavigator } from 'react-navigation';

import { Card } from 'react-native-paper';

class LandingPage extends React.Component {
  render() {
    return (
      <View>
        <Text>here is landing page</Text>
      </View>
    );
  }
}

const RouterNavigator = createAppContainer(
  createStackNavigator(
    {
      LandingPage: {
        screen: LandingPage,
        navigationOptions: {
          header: null,
        },
      },
    },
    {
      mode: 'card',
      transparentCard: true,
      cardStyle: { backgroundColor: 'transparent' },
      transitionConfig: () => ({
        containerStyle: {
          backgroundColor: 'transparent',
        },
      }),
      initialRouteName: 'LandingPage',
    }
  )
);
export default class App extends React.Component {
  render() {
    return (
      <ImageBackground
        source={require('./bgimage.jpeg')}
        style={{
          flex: 1,
        }}>
        <RouterNavigator />
      </ImageBackground>
    );
  }
}
...