React Navigation 的使用基础部分（七）打开全屏modal

原文链接

涉及到用户界面时，字典上并没有给modal一个满意的定义，但是semantic UI这样描述：

一个 modal 显示内容，暂时阻塞了与主视图的交互

听上去是正确的。一个modal就像一个弹出框--它不是你的主要导航流中的一部分--通常有不同的弹出，消失方式，其目的在于关注特定部分内容或交互。

将其作为基础部分的一部分来解释的目的不仅仅是因为很常见，同时也因为他的实现需要嵌套导航器的知识，而这时React Navigation中的重要部分。

创建一个 modal 栈

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

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

  /* render function, etc */
}

class ModalScreen extends React.Component {
  render() {
    return (
      
        This is a modal!
         this.props.navigation.goBack()}
          title="Dismiss"
        />
      
    );
  }
}

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

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack,
    },
    MyModal: {
      screen: ModalScreen,
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
);

我们都知道，栈导航器函数返回一个React组件（回想一下我们在App组件中渲染）。这个组件也可以用作screen组件！通过这样做，我们把一个栈导航器嵌套在另一个栈导航器内。在这种情况下，当我们想给modal不同的跳转样式并且禁用header时就很有用。这一点很重要，因为对于tab导航器来说，可能每一个tab都有自己的栈！这种情况可能是你所期待的：从tab A切换到tab B，此时你想要A继续保持它的导航状态。这张图是例子中的导航结构。

栈导航器中的mode属性可以是card（默认）或者modal。modal在iOS的行为是从屏幕底部滑出同时允许用户从顶部向下滑来关闭。在安卓平台mode属性没有影响。

当我们调用navigate时除了目的路由外不需要指定任何东西。不需要指定属于哪个栈（root 或者main）--React Navigation会去最近的导航器中寻找，然后执行行为。再次看一下那张图，想象从HomeScreen向上到MainStack的navigate行为，我们知道MainStack不能处理MyModal路由，所以上溯到RootStack，而RootStack是可以操作该路由的。

总结

改变栈导航器中跳转的类型，可以使用mode配置。当设置成modal时，所有界面以动画形式从底部进入而不是从右向左。这个配置会应用到整个栈导航器中，所以要想在其他界面中使用从右向左的方式，我们添加另一个默认配置的导航栈。

this.props.navigation.navigate会顺着导航器树向上寻找到可以处理navigate行为的导航器。