React Navigation默认背景颜色

Question

我正在使用react-navigation和stack-navigator来管理我的屏幕。

我正在使用的平台：

• Android的
• React Native：0.47.1
• 反应导航：1.0.0-beta.11
• 仿真器和设备

我有一个屏幕，它作为一个模态形式，但它真的是一个全屏幕。为什么“作为一种形式”的部分很重要？那是因为它是一种带有一些选项和透明背景颜色的模态菜单。

这就是我的期望：

但我得到的是这个：

如您所见，在第二个示例中，背景颜色被完全替换，或者先前加载的组件已卸载，因此我想要获得的效果会丢失。这个想法是能够像任何其他屏幕一样导航到这个屏幕。

如果无法使用反应导航完成，我还可采取其他方式吗？

这个组件执行动作（redux），因为它是一个跨应用程序组件，并且内部封装了很多机制和逻辑，这就是为什么我不能将它用作PureComponent中继使用这个的组件。至少，将此Component作为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;

Answer 1

添加不透明度：

cardStyle: {
  backgroundColor: "transparent",
  opacity: 1
}

Answer 2

从[email protected]开始，有一个配置选项transparentCard，这使得这成为可能。

const RootNavigator = createStackNavigator(
  {
    App,
    YourModal,
  },
  {
    headerMode: 'none',
    mode: 'modal',
    transparentCard: true,
  },
);

这不会模糊你的背景;它会让它变得透明。要正确模糊它，你需要做像this这样的事情。确保从屏幕顶部边缘上方开始背景，因为卡片将从底部开始动画，并且您可能希望屏幕逐渐模糊，而不是在其动画中具有锐利边缘的不透明度。

Answer 3

使用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

Answer 4

既然你想要'Modal'，你可以使用反应原生的'Modal'。

https://facebook.github.io/react-native/docs/modal.html