时间戳

首页 > 解决方案 > 如何使用反应原生和反应导航设置背景图像？

react-native - 如何使用反应原生和反应导航设置背景图像？

问题描述

我正在使用 react native 和 react navigation v3，并且我正在尝试为我的整个应用程序设置背景图像。但由于某种原因，图像不显示。

如果我包装我的 Home 组件，背景图像会按预期显示，但如果我包装堆栈导航器，则背景是白色的。我在网上搜索了解决方案，但似乎没有用。

const AppNavigator = createAppContainer(
  createStackNavigator(
    {
      Home: {screen: Home},
      Vocabulary: {screen: Vocabulary},
      AddWord: {screen: AddWord},
    },
    {
      initialRouteName: 'Home',
      headerMode: 'none',
      cardStyle: {backgroundColor: 'transparent', shadowColor:'transparent'},
      transitionConfig: () => ({
        containerStyle: {
          backgroundColor: 'transparent',
        },
      }),
    },
 ),
);
const App = () => {
 return (
    <ImageBackground
      source={require('./src/drawable/background1.jpg')}
      style={{flex: 1}}
      resizeMode="cover">
      <Provider store={store()}>
        <AppNavigator />
      </Provider>
    </ImageBackground>
 );
};
export default App;

现在我看到了组件，但背景是白色的。

标签： react-nativereact-navigation

解决方案

这是react-navigation v6.x的解决方案

正如@Bizkrem Muhammad 的回答中所建议的那样，设置Stack NavigatorcardStyle: {backgroundColor: 'transparent'}的属性对我不起作用。screenOptions

但是，在这个 Github 问题的帮助下，我找到了一个为我们的每个屏幕设置默认背景颜色的解决方案NavigatorContainer：

import {
  DefaultTheme,
  NavigationContainer,
} from '@react-navigation/native';

const navTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'transparent',
  },
};

然后用 包装你的Navigatoror NavigationContainer，<ImageBackground>像这样：

return (
    <ImageBackground source={{/* your desired uri */}}>
        <NavigationContainer theme={navTheme} >
            {/* ... */}
        </NavigationContainer>
    </ImageBackground>
)

推荐阅读