react-native - React Native：模态屏幕的暗背景

Question

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

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;

提前致谢！

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