React Native：如何为模态屏实现背景变暗效果

我来帮你搞定这个Modal背景变暗的问题！其实有两种简单的实现方式，我都给你详细说明：

方法一：直接给Modal卡片添加半透明背景 #

你可以在Settings页面的navigationOptions里配置cardStyle属性，设置半透明的黑色背景，这样就能让底层的Home屏幕自然呈现变暗效果。修改你的Stack Navigator代码如下：

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},
        // 添加卡片样式配置
        cardStyle: {
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
    transparentCard: true,
  },
);
export default AppStack;

这个方法最直接，只需要在导航配置里加几行代码就能生效。

方法二：在Modal组件内部自定义遮罩层 #

如果想要更灵活地控制遮罩的样式（比如添加点击关闭逻辑、调整透明度或者加动画），可以在Settings组件的最外层包裹一个遮罩View：

// Settings.js 组件文件
import React from 'react';
import {View, StyleSheet, TouchableOpacity} from 'react-native';
import {useNavigation} from '@react-navigation/native';

const Settings = () => {
  const navigation = useNavigation();

  return (
    // 遮罩层：全屏半透明黑色，点击可关闭Modal
    <TouchableOpacity 
      style={styles.modalOverlay}
      onPress={() => navigation.goBack()}
      activeOpacity={1}
    >
      // Modal内容容器：自定义尺寸与样式
      <View style={styles.modalContent}>
        {/* 这里放置你的Settings组件具体内容 */}
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.6)', // 可自行调整透明度
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    width: '90%',
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 24,
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
});

export default Settings;

这种方式的优势是完全可控，你可以根据需求调整遮罩的透明度、添加阴影效果，甚至给遮罩和内容加上过渡动画。

关键注意点 #

• 一定要确保Stack Navigator配置里的transparentCard已经设为true，否则卡片背景会是不透明的，遮罩效果会被完全覆盖。
• 如果你的项目已经升级到了@react-navigation/native（react-navigation 5及以上版本），上面的代码逻辑依然适用，只是导航初始化的方式略有不同，但核心的遮罩实现思路是一致的。

内容的提问来源于stack exchange，提问作者Luke Morrice