React Native：模态屏幕的暗背景答案

【问题标题】：React Native: dim background of modal screenReact Native：模态屏幕的暗背景
【发布时间】：2020-05-30 14:03:50
【问题描述】：

如何使模态框的背景变暗？为了清楚起见，我正在使用带有模式模式的堆栈导航器。我设法使背景透明，但不知道如何使背景屏幕变暗。这是我的堆栈导航器代码：

import {createStackNavigator} from 'react-navigation-stack';
import Home from '../components/home/Home';
import Settings from '../components/settings/Settings';

const AppStack = createStackNavigator(
  {
    Home: {
      screen: Home,
    },
    Settings: {
      screen: Settings,
      navigationOptions: {
        gestureResponseDistance: {vertical: 800},
      },
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
    transparentCard: true,
  },
);

export default AppStack;

提前致谢！

【问题讨论】：

标签： react-native react-native-modal

【解决方案1】：

您可能需要在您的代码中将opacity 的另一个属性添加到cardStyle。您可以在此处提出的类似 github 问题中阅读有关它的更多信息。 https://github.com/react-navigation/react-navigation/issues/7085

 {
mode: "modal",
headerMode: "none",
transparentCard: true,
defaultNavigationOptions: {
  gesturesEnabled: false
},
cardStyle: {
  // makes transparentCard work for android
  opacity: 1.0
}

【讨论】：