ImageBackground组件作为反应导航路由器的容器隐藏所有子组件

Question

我想为我的本机应用程序中的所有屏幕设置背景图像，

我在组件树的顶层使用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正在被隐藏，即使它也被渲染！

Answer 1

看看这个例子吧。这有助于您实现您的目标吗？

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