React Native：如何在Modal上方显示StackNavigator？

你遇到的核心问题是：NewObservation组件内的React Native原生<Modal>默认会渲染在应用视图层级的最顶层，而你的StackNavigator的模态页面（比如SeeDetails）属于根导航器的子层级，所以会被这个自定义Modal挡住。下面是几个可行的技术方案：

方案一：用StackNavigator替代自定义Modal（推荐） #

这是React Navigation的最佳实践，把原本放在Modal里的内容抽成独立页面，交给StackNavigator统一管理模态框层级，这样所有导航页面的层级都会由导航器自动处理，自然就能实现Stack页面覆盖自定义Modal的效果。

步骤： #

1. 把NewObservation里的Modal内容抽成单独组件，比如NewObservationModalContent：

class NewObservationModalContent extends React.Component {
  // 原来Modal里的逻辑和UI
  render() {
    return (
      <View style={{flex:1, backgroundColor:'white'}}>
        {/* 你的Modal内容 */}
        <Button title="打开详情页" onPress={() => this.props.navigation.navigate('SeeDetails')} />
      </View>
    )
  }
}

2. 修改StackNavigator配置，新增这个页面：

const StackView = StackNavigator( {
  global: { 
    screen: MyTabView, 
    navigationOptions: {header: null} 
  },
  SeeDetails: { screen: SeeDetails },
  NewObservationModal: { screen: NewObservationModalContent } // 新增的Modal页面
}, { mode: 'modal' } );

3. 修改NewObservation组件，移除原生<Modal>，改用导航跳转打开模态页面：

class NewObservation extends React.Component {
  openModal = () => {
    // 原来的Modal打开逻辑替换为导航跳转
    this.props.navigation.navigate('NewObservationModal');
  }

  render() {
    return (
      <View style={{flex:1}}>
        <Button title="打开自定义模态框" onPress={this.openModal} />
      </View>
    )
  }
}

这样调整后，无论是NewObservationModal还是SeeDetails都由StackNavigator管理，当你在NewObservationModal里打开SeeDetails时，它会自动显示在上方，完全符合你的需求。

方案二：调整原生Modal的层级（仅适用于必须保留原生Modal的场景） #

如果你因为某些原因必须保留NewObservation内的原生<Modal>，可以通过修改Modal的属性来降低它的层级，让StackNavigator的页面能覆盖它：

关键修改： #

给原生Modal添加zIndex属性，同时确保StackNavigator的页面容器有更高的zIndex：

class NewObservation extends React.Component {
  render() {
    return (
      <Modal 
        animationType={"none"}
        visible={this.state.modalVisible}
        style={{zIndex: 100}} // 降低Modal的层级
        // 其他属性
      >
        {/* Modal内容 */}
      </Modal>
    )
  }
}

然后在StackNavigator的容器或者SeeDetails页面的根视图设置更高的zIndex：

class SeeDetails extends React.Component {
  render() {
    return (
      <View style={{flex:1, zIndex: 200}}>
        {/* 详情页内容 */}
      </View>
    )
  }
}

注意：这种方式可能会因为不同RN版本、不同平台（iOS/Android）的层级渲染差异出现兼容性问题，所以还是优先推荐方案一。

方案三：重构导航结构 #

如果你的业务允许，可以把NewObservation从TabNavigator中移出来，作为StackNavigator的独立页面，这样它的原生Modal和Stack的其他页面层级关系更容易控制：

// 重新定义TabNavigator，移除NewObservation
const MyTabView = TabNavigator( {
  // 其他Tab页面
}, { ... } );

// StackNavigator包含Tab和独立的NewObservation
const StackView = StackNavigator( {
  global: { screen: MyTabView, navigationOptions: {header: null} },
  NewObservation: { screen: NewObservation }, // 独立出来
  SeeDetails: { screen: SeeDetails }
}, { mode: 'modal' } );

然后在Tab的某个页面通过navigation.navigate('NewObservation')打开该页面，此时NewObservation的Modal和SeeDetails的层级关系可以通过导航器的模态模式更好地协调。

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