如何在不使用第三方库的情况下实现React Native Modal背景调暗？

嘿，完全可以不用第三方库实现你想要的效果！我看了你的代码，只需要做几个小调整就能搞定背景变暗和弹窗周围透明的需求，具体修改如下：

关键修改点 #

• 移除presentationStyle="FormSheet"：这个属性会强制使用系统默认的表单弹窗样式，限制了我们自定义背景和透明效果
• 给Modal内部的外层View添加半透明背景+居中布局，实现背景调暗
• 微调弹窗容器的样式，确保它在半透明背景上居中显示

修改后的Modal组件代码 #

render() {
  let modal = this.state.modalType=='skill'? <SkillModal /> : <TrialModal />;
  return (
    <View style={styles.container}>
      {/* 移除了presentationStyle="FormSheet"，解除系统样式限制 */}
      <Modal 
        animationType='slide' 
        onRequestClose={() => console.log('no warning')} 
        transparent 
        visible={this.state.showModal} 
      >
        {/* 新增外层View，用来实现半透明背景和居中布局 */}
        <View style={styles.modalBackground}>
          <View style={styles.modalView} >
            <TouchableOpacity onPress={this.closeModalFunc} >
              <Text style={styles.closeText}>X</Text>
            </TouchableOpacity>
            <View>
              {modal}
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
}

修改后的样式代码 #

import {StyleSheet} from 'react-native';
import colors from '../../../theme/colors';
import metrics from '../../../theme/metrics';
import {container} from '../../../theme/base';
const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.background.gray,
  },
  // 新增：半透明背景，铺满整个屏幕，负责居中内部弹窗
  modalBackground: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)', // 0.5是透明度，可根据需求调整（0-1之间）
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalView: {
    backgroundColor: colors.background.white,
    // 替换margin为padding，或调整margin值，确保弹窗周围有透明空间
    padding: 20,
    borderRadius: 8, // 可选：给弹窗加圆角，视觉效果更柔和
    width: '80%', // 可选：限制弹窗宽度，避免过宽影响体验
  },
  closeText: {
    backgroundColor: colors.background.purpleishBlue,
    color: colors.background.white,
    borderRadius: metrics.avatar.small,
    width: 32,
    padding: 6,
    alignSelf: 'flex-end',
    textAlign: 'center',
    borderWidth: 1,
    borderColor: colors.background.white,
  },
});
export default styles;

效果说明 #

• modalBackground的rgba(0,0,0,0.5)会让整个屏幕背景变暗，你可以修改最后一个数值调整透明度（0为完全透明，1为完全不透明）
• 通过justifyContent: 'center'和alignItems: 'center'让弹窗居中显示，周围自然形成透明区域
• 移除presentationStyle="FormSheet"后，Modal不再受系统样式约束，完全由我们自定义的样式控制

这样修改后，你就能得到背景变暗、弹窗周围透明的效果啦，完全不需要依赖任何第三方库！

内容的提问来源于stack exchange，提问作者Asbar Ali