javascript-React Navigation默认背景色

我正在使用react-navigation和堆栈导航器来管理屏幕.

我正在使用的平台：

>安卓
> React Native：0.47.1
>反应导航：1.0.0-beta.11
>仿真器和设备

我有一个屏幕,它充当模式形式,但实际上是全屏.为什么“作为一种形式形式的行为”这一部分很重要？那是因为它是一种模态菜单,带有一些选项并且具有透明的背景色.

这是我期望的：

但是我得到的是：

如您所见,在第二个示例中,背景色被完全替换,或者先前装入的组件被卸载,因此我想要获得的效果消失了.
想法是能够像其他任何屏幕一样导航到该屏幕.

如果使用反应导航无法完成任务,我还可以采取其他方法吗？

这个组件执行动作(redux),因为它是一个跨应用程序组件,并且在内部封装了许多机制和逻辑,这就是为什么我不能将其用作使用此组件的组件上的PureComponent中继.至少,将此组件设为PureComponent会迫使我在许多其他组件中复制许多机制和逻辑.

出于问题的考虑,并且为了避免使问题过于复杂,两个屏幕的样式都完全相同,但是通过StackNavigation推送的屏幕将替换backgroundColor或卸载先前的屏幕.

这是我到目前为止所拥有的：

//PlaylistSelector.js
render() {
  //Just a full size empty screen to check and avoid bugs
  //Using red instead of transparent, works

  return (
    <View style={{ flex: 1, backgroundColor: 'transparent' }}>
    </View>
  );
}

//Navigator.js
import { StackNavigator } from 'react-navigation';

import Album from './Album'; //This is the screen I expect to keep at the background
import PlaylistSelector from './PlaylistSelector';

const AppNavigator = StackNavigator(
    {
        ...moreScreens,
        Album: { screen: Album },
        PlaylistSelector: {
            screen: PlaylistSelector,
            navigationOptions: {
                style: { backgroundColor: 'red' } //Does not work, red is just to ilustrate, should be transparent,
                cardStyle: { //Does not work,
                    backgroundColor: 'transparent',
                },
                bodyStyle: { //Does not work,
                    backgroundColor: 'transparent',
                },
            }
        }
    },
    {
        initialRouteName: 'Splash',
        headerMode: 'none',
        cardStyle: { //Does not work
            backgroundColor: 'transparent',
        },
        transitionConfig: (): Object => ({ //Does not work
            containerStyle: {
                backgroundColor: 'transparent',
            },
        }),
    }
);

export default AppNavigator;

解决方法:

通过react-navigation v3.x,您可以使用transparentCard pro：

const MainNavigator = createStackNavigator(
  {
    BottomTabs: {
      screen: BottomTabsStack,
    },
    Modal: {
      screen: ModalScreen,
    }
  },
  {
    headerMode: 'none',
    mode: 'modal',
    transparentCard: true,
    cardStyle: { opacity: 1 } //This prop is necessary for eventually issue.
  }
);

您可以在下面找到完整的示例：

https://snack.expo.io/@cristiankmb/stacks-in-tabs-with-header-options-with-modal

标签：react-navigation,stack-navigator,android,javascript,react-native
来源： https://codeday.me/bug/20191009/1881876.html