React Navigation 基础 7 : 全屏模态

Dictionary.com对于“模态”没有给出一个令人满意的定义，不过语义UI是这么描述“模态”的：

A modal displays content that temporarily blocks interactions with the main view。
“模态”显示内容的同时临时阻止用户和主视图的交互。

听起来这是对的。模态就像一个弹出框–它不是主导航流程的一部分—通常它有一个不同的切屏方式，不同的关闭方式并且它主要用来关注内容或者交互的某个部分。

把这一点作为React Navigation基础的一部分来阐述，不仅因为它是一个很常见的使用情况，而且因为其实现基于嵌套导航器知识，这是 React Navigation非常重要的一部分。

创建一个模态导航栈

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const params = navigation.state.params || {};

    return {
      headerLeft: (
        <Button
          onPress={() => navigation.navigate('MyModal')}
          title="Info"
          color="#fff"
        />
      ),
      /* the rest of this config is unchanged */
    };
  };

  /* render function, etc */
}

class ModalScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{ fontSize: 30 }}>这是一个模态屏幕!</Text>
        <Button
          onPress={() => this.props.navigation.goBack()}
          title="关闭"
        />
      </View>
    );
  }
}

const MainStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    /* Same configuration as before */
  }
);

const RootStack = StackNavigator(
  {
    Main: {
      screen: MainStack,
    },
    MyModal: {
      screen: ModalScreen,
    },
  },
  {
    mode: 'modal',// 注意这里设置为 modal
    headerMode: 'none', // 注意这里 none 表示不显示导航头部
  }
);

执行这段代码

这段代码中有这些要点需要指出:

1. 我们已经知道，StackNavigator返回一个React组件(回忆一下我们在应用App中渲染的<RootStack />)。同样该组件也可以用做一个屏幕组件！这么做之后，我们就可以把一个StackNavigator(作为一个屏幕组件)嵌套到另外一个StackNavigator中去。在这个例子中，这一点对我们很有用，因为我们想对“模态”使用一个不同的切屏方式，而且我们想在整个模态导航栈中所有的屏幕上禁用头部。将来这一点很重要，因为比如对于选项卡导航(tab navigation),每个选项卡很可能会有自己的导航栈！直观地讲，这正是你想要的：当你从选项卡A切换到选项卡B后，你可能希望当你在选项卡B的导航栈中切屏幕换时，你还希望选项卡A继续保持原来的导航状态。看一下下面这张图，它描述了上面这个例子的导航结构：
   
2. StackNavigator的设置选项mode可以是modal或者card,card是缺省值。在苹果手机上，modal屏幕的表现是从下方滑出，允许用户从顶部向下滑动关闭该屏幕。在安卓系统上，modal没有什么特殊效果，因为安卓平台上本来全屏模态就没有特殊的屏幕切换行为。
3. 调用navigate时除了需要指定目标屏幕的路由名称之外其他都不需要指定。没有必要指定目标屏幕所属的导航栈是什么(管它是什么’main’导航栈或者’root’导航栈，无所谓)。— React Navigation会尝试寻找最近的匹配路由然后执行屏幕跳转。为了形象地理解这一点，再看看上面那幅图，想像一下HomeScreen 头部的Info按钮被点击时，会有一个navigate到模态屏幕MyModal的屏幕切换发生：导航会从HomeScreen流转到MainStack，我们知道MainStack是不能处理MyModal的，因为MyModal不在MainStack中，然后导航会向上流转到根部的RootStack，而RootStack中包含了导航目标屏幕MyModal，就此到目标屏幕的导航事件就可以完成了。

总结

• 想改变StackNavigator的屏幕切换方式可以使用其设置选项mode。当该选项设置为modal时，整个屏幕的出现是自底向上的一个动画而不是从右向左。该选项对整个StackNavigator中所有屏幕有效，因为我们想对其他屏幕使用自右向左切屏方式，所以我们还采用了另外一个使用缺省设置的导航栈。
• this.props.navigation.navigate 遍历整个导航树(包括导航树中所有的导航栈)寻找匹配的目标路由屏幕。
• 目前为止所有的代码

英文原文

该系列文章目录

React Navigation 基础 8 : 术语词汇表
React Navigation 基础 7 : 全屏模态
React Navigation 基础 6 : 头部按钮
React Navigation 基础 5 : 配置导航头部
React Navigation 基础 4 : 屏幕间切换参数传递
React Navigation 基础 3 : 屏幕间切换
React Navigation 基础 2 : Hello React Navigation
React Navigation 基础 1: 开始使用