自定义视图作为 StackNavigator 的背景

Question

我需要在堆栈导航器下方使用一张图片或类似的东西。 在 StackNavigator 中，我可以设置背景颜色、不透明度（视图样式）等。但无法设置一个背景图像或自定义视图组件。此外，如果设置为每个屏幕，则不利于屏幕翻译。

我试图这样包装：

 <ImageBackground>
    <MyStackNavigator/>
 </ImageBackground/>

没有结果。 你能帮助我吗？ +1 任何尝试

Answer 1

我找到了解决办法

导航器：

const AuthStackNavigator = StackNavigator({
   LANDING: {
       screen: LandingScreen
   },
   SIGN_IN: {
       screen: SignInScreen
   },
   {
       mode: 'card',
       cardStyle: { backgroundColor: 'transparent' },
       transitionConfig: () => ({
           containerStyle: {
               backgroundColor: 'transparent',
           }
       }),
       initialRouteName: 'LANDING',
   }
);

渲染：

render() {
    return <ImageBackground
        style={{
            width: null,
            height: null,
            backgroundColor: 'transparent',
            flex: 1,
        }}
        source={landing_background}
    >
        <AuthStackNavigator
            ref='navigator'
        />
    </ImageBackground>
}