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

我正在将React Native与React Navigation v5一起使用，我只想在我的应用程序中添加一个静态背景图像，而不会在每个新屏幕上重新加载。 我已经尝试了不同的方法来设置类似样式的设置

cardStyle: { backgroundColor: 'transparent' }

但我找不到解决办法。我曾尝试在网上寻找解决方案，但由于V5是一个非常新的版本，因此似乎没有太多关于它的讨论

这是我目前的代码，但这只是在堆栈顶部添加图像，使我在Home中添加的所有按钮消失

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;

---

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

您可以在每个屏幕中添加

ImageBackground

，但是要删除可以设置的重新加载动画效果

fadeDuration={0}

在

ImageBackground

组件中。

您可以在想要的每个屏幕中添加

ImageBackground

，但是要删除可以在

ImageBackground

组件中设置的

fadeDuration={0}

重新加载动画效果

import {StyleSheet} from 'react-native';

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