More than code
Welcome to the website

React Navigation 指南 5:全屏模态

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

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

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

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

1. 创建一个模态导航栈

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 }}>This is a modal!</Text>
        <Button
          onPress={() => this.props.navigation.goBack()}
          title="Dismiss"
        />
      </View>
    );
  }
}

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',
  }
);

注意:
+ 我们知道CreateStackNavigator返回一个React组件,这个组件同样也可以用作一个屏幕组件,这样就能把CreateStackNavigator嵌套到另一个CreateStackNavigator中去。这样做很有用,因为我们希望模态窗有不同的切屏方式,而且在整个模态窗导航栈中禁用头部。对于Tab导航,当从标签A切换到标签B时,我们会希望标签A的保持原来的导航状态。
下面这张图表示了上面代码中的导航结构:

+ CreateStackNavigator的设置选项mode可以是modal或者card,card是缺省值。在苹果手机上,modal屏幕的表现是从下方滑出,允许用户从顶部向下滑动关闭该屏幕。在安卓系统上,modal没有什么特殊效果,因为安卓平台上本来全屏模态就没有特殊的屏幕切换行为。
+ 调用navigate时除了需要指定目标屏幕的路由名称之外其他都不需要指定。React Navigation会尝试寻找最近的匹配路由然后执行屏幕跳转。比如点击HomeScreen头部的Info按钮被点击时:导航会从HomeScreen流转到MainStack,然后导航会向上流转到根部的RootStack,而RootStack中包含了导航目标屏幕MyModal,就此到目标屏幕的导航事件就可以完成了。

2. 总结

  • 改变屏幕切换方式可以使用其设置选项mode。当该选项设置为modal时,整个屏幕的出现是自底向上的一个动画而不是从右向左。该选项对整个StackNavigator中所有屏幕有效,因为我们想对其他屏幕使用自右向左切屏方式,所以我们还采用了另外一个使用缺省设置的导航栈。
  • this.props.navigation.navigate 遍历整个导航树(包括导航树中所有的导航栈)寻找匹配的目标路由屏幕。
赞(3) 打赏
未经允许不得转载:李帅帅空间 » React Navigation 指南 5:全屏模态

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

React CLI - 快速创建react项目脚手架工具

官 网GitHub

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏