React Navigation：实现头部右侧按钮唤起3/4宽度的透明模态框

我来帮你调整代码，实现模态框占页面3/4宽度、剩余1/4显示原页面的需求！

1. 确认StackNavigator配置（保持透明卡片设置） #

你的现有配置已经具备基础条件，只需确保透明相关的属性设置正确，让模态框能透出下方页面：

FilterOptions: {
  screen: FilterOptions,
  navigationOptions: {
    headerMode: "none",
    header: null,
    modal: "modal",
    transparentCard: true,
  },
  cardStyle: {
    backgroundColor: "transparent",
    opacity: 1
  }
}

2. 修改FilterOptions页面代码（调整模态框宽度） #

核心是把模态框宽度从原来的70%改成75%（正好对应页面的3/4），同时保留外层容器的透明背景，让左侧区域自然透出原页面：

import React, { Component } from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';

class ModalExample extends Component {
  render() {
    return (
      {/* 外层容器：透明背景，点击空白区域可关闭模态框 */}
      <TouchableWithoutFeedback onPress={() => this.props.navigation.goBack()}>
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', backgroundColor: 'transparent' }}>
          {/* 模态框主体：占75%宽度，高度铺满屏幕 */}
          <TouchableWithoutFeedback>
            <View style={{ height: '100%', width: '75%', backgroundColor: '#fff', justifyContent: 'center', padding: 20 }}>
              <Text>Testing a modal with transparent background</Text>
              {/* 这里可以添加你的筛选选项内容 */}
            </View>
          </TouchableWithoutFeedback>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

export default ModalExample;

关键细节说明： #

• 外层View设置backgroundColor: 'transparent'，确保左侧25%的空白区域能直接显示下方的原页面内容；
• justifyContent: 'flex-end'让模态框固定在页面右侧，width: '75%'精准匹配3/4的页面宽度；
• 新增的TouchableWithoutFeedback做了两层处理：外层点击空白区关闭模态框，内层包裹模态框内容，避免点击内部内容时误触发关闭。

内容的提问来源于stack exchange，提问作者Janaki Narayanan