自定义视图作为StackNavigator的背景

时间:2017-12-27 06:58:52

标签: react-native stack-navigator

我需要在堆栈导航器下面使用一个图像或类似的东西。 进入StackNavigator我可以设置backgroundColor,不透明度(视图样式)等。但是没有可能设置一个背景图像或自定义视图组件。此外,如果设置为每个屏幕,它不适合屏幕翻译。

我试着像这样包裹:

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

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

1 个答案:

答案 0 :(得分:3)

我找到了解决方案

导航器:

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>
}