我来帮你梳理下问题所在，然后给出修复方案：

你当前的实现有两个核心问题：

• 同时混用了手动渲染的Modal组件和React Navigation的modal导航模式，这两套模态机制是独立的，导致导航栏无法关联到你的模态页
• 导航配置里设置了headerMode: 'none'，直接隐藏了所有页面的导航栏

修复步骤 #

我们完全可以借助React Navigation的modal模式来实现需求，不需要手动写Modal组件，具体调整如下：

1. 修改导航配置

移除headerMode: 'none'（默认值是screen，会自动显示导航栏），同时配置好模态页的导航栏标题：

const ModalNavigator = createStackNavigator({
  MainApp: { screen: RootStack },
  ComponentModal: { 
    screen: Component, 
    navigationOptions: { 
      title: 'Add Prospect', // 设置模态页的导航栏标题
      // 还可以自定义导航栏样式，比如：
      // headerStyle: { backgroundColor: '#fff' },
      // headerTintColor: '#333'
    } 
  }
}, { 
  mode: 'modal', // 保持modal模式
});
const AppContainer = createAppContainer(ModalNavigator);

2. 移除手动渲染的Modal组件

在你的主组件里，不需要自己控制Modal的显示隐藏，改为通过导航方法打开模态页：

render() {
  return (
    <SafeAreaView style={styles.container}>
      {/* 示例：用按钮触发打开模态页 */}
      <Button 
        title="打开模态页" 
        onPress={() => this.props.navigation.navigate('ComponentModal')} 
      />
      {/* 这里放你的主界面原有内容 */}
    </SafeAreaView>
  )
}

3. 在模态页里实现关闭逻辑

在Component组件中，不需要自定义toggle方法，直接用导航的goBack关闭模态：

// Component组件内
closeModal = () => {
  this.props.navigation.goBack();
}

// 比如在组件里加一个关闭按钮
render() {
  return (
    <View style={styles.modalContent}>
      <Button title="关闭" onPress={this.closeModal} />
      {/* 模态页其他内容 */}
    </View>
  )
}

为什么原来的方案不生效？ #

你手动渲染的Modal组件是独立于React Navigation导航栈的，导航栏属于导航栈的一部分，自然不会出现在你手动创建的Modal里；再加上headerMode: 'none'的配置，进一步隐藏了导航栏，所以两种因素叠加导致需求无法实现。

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