如何使用 react native 和 react navigation v5 设置背景图像？答案

【问题标题】：How to set a background image with react native and react navigation v5?如何使用 react native 和 react navigation v5 设置背景图像？
【发布时间】：2020-09-16 21:31:14
【问题描述】：

我正在使用带有 React Navigation v5 的 React Native，我想要做的就是向我的应用程序添加一个静态背景图像，该图像不会随着每个新屏幕重新加载。我尝试了不同的方法来设置样式

cardStyle: { backgroundColor: 'transparent' }

但我找不到解决方案。我曾尝试在网上寻找解决方案，但由于 V5 相当新，因此似乎没有太多讨论。

这是我目前的代码，但它所做的只是将图像添加到堆栈顶部，从而使我在主页中添加的所有按钮都消失了。

const Stack = new createStackNavigator();

const App = () => {
  return (
    <ImageBackground
      style={styles.center}
      source={require('./img/pic.jpg')}
      resizeMode="stretch">
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            cardStyle: {backgroundColor: 'transparent'},
            headerShown: false,
          }}>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
          <Stack.Screen name="Screen3" component={Screen3} />
        </Stack.Navigator>
      </NavigationContainer>
    </ImageBackground>
  );
};

export default App;

如果需要，还有我的 styles.js：

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  center: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});
export default styles;

如果有人可以帮助我，将不胜感激。

【问题讨论】：

标签： javascript reactjs react-native react-navigation react-navigation-v5

【解决方案1】：

对于那些使用 react navigation v6 的人来说，答案是使用主题。真的不知道它们是否在那里，以及它们在 v5 中是否可以正常工作。使用提供的相同代码，当您导入 NavigationContainer 时，也使用 DefaultTheme 导入

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

然后创建一个主题，将背景颜色设置为透明跟随

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

现在添加使用 NavigationContainer 时创建的主题

{/* All that code including the BackgroundImage */}
<NavigationContainer theme={MyTheme}>
    {/* Your Stack navigator and it's Screens */}
</NavigationContainer>

整个屏幕看起来像这样

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

const Stack = new createStackNavigator();

const App = () => {

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

    return (
        <ImageBackground
            style={styles.center}
            source={require('./img/pic.jpg')}
            resizeMode="stretch">
            <NavigationContainer theme={MyTheme}>
                <Stack.Navigator screenOptions={{ headerShown: false }}>
                    <Stack.Screen name="Home" component={Home} />
                    <Stack.Screen name="Screen1" component={Screen1} />
                    <Stack.Screen name="Screen2" component={Screen2} />
                    <Stack.Screen name="Screen3" component={Screen3} />
                </Stack.Navigator>
            </NavigationContainer>
        </ImageBackground>
    );
};

export default App;

【讨论】：

【解决方案2】：

您可以在您想要的每个屏幕中添加ImageBackground，但要删除您可以在ImageBackground 组件中设置fadeDuration={0} 的重新加载动画效果。

【讨论】：