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

，我有子组件，它是react-navigation中的路由器像这样：

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

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

1 个答案: