React Native 2.10.4中如何设置StackNavigator背景透明

问题根源 #

StackNavigator的默认卡片容器自带白色背景，同时每个屏幕组件的根View也默认有背景色，直接遮挡了外层的ImageBackground。

修复步骤 #

1. 修改homeStack.js，让导航卡片透明 #

在createStackNavigator的配置里添加cardStyle，将背景设为透明：

import { createStackNavigator } from "react-navigation-stack"
import { createAppContainer } from "react-navigation"
import Home from '../components/Home'
import Detail from '../components/Detail'

const screens = {
    Home: {
        screen: Home,
    },
    Detail: {
        screen: Detail
    },
}

const HomeStack = createStackNavigator(screens, {
    defaultNavigationOptions: {
        headerShown: false
    },
    // 新增配置：让导航卡片背景透明
    cardStyle: {
        backgroundColor: 'transparent'
    }
});

export default createAppContainer(HomeStack);

2. 设置屏幕组件的根View为透明 #

打开Home.js和Detail.js，给它们的根View添加透明背景和flex:1（确保占满屏幕）。以Home.js为例：

import { View, Text } from 'react-native'

export default function Home() {
  return (
    <View style={{ flex: 1, backgroundColor: 'transparent' }}>
      <Text>Home Screen</Text>
    </View>
  )
}

3. 优化App.js布局（可选） #

把ImageBackground的height:"100%"改成flex:1，更符合React Native的布局逻辑：

import { StyleSheet, View, ImageBackground} from 'react-native';
import Navigator from './routes/homeStack'

export default function App() {
  const image = require("./assets/background.jpg");

  return (
    <View style={styles.container}>
      <ImageBackground style={{ flex: 1 }} source={image}>
        <Navigator />
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#E8EAED',
  },
});

完成以上修改后，导航器的卡片和屏幕组件就不会再遮挡自定义背景图了。

内容的提问来源于stack exchange，提问作者SneaKy178