欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React Navigation5.x 第九章 全面屏model

程序员文章站 2022-05-28 23:24:58
...

React Navigation5.x 第九章 全面屏model

上图中显示了一个完全铺满整个屏幕的model

。model就像一个弹窗------它不是你导航中的页面-----其显示与隐藏都有其独特的方式,会向你展示一些特别的信息。

将这个作为React Navigation框架的一部分进行讲解的目的不仅仅是因为其是我们经常会用到的,而且这也是实现嵌套导航所需掌握的知识点。其是React Navigation中很重要的一部分。

创建一个model堆栈导航器

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
      <Button
        onPress={() => navigation.navigate('MyModal')}
        title="Open Modal"
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View>
      <Text>Details</Text>
    </View>
  );
}

function ModalScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is a modal!</Text>
      <Button onPress={() => navigation.goBack()} title="Dismiss" />
    </View>
  );
}

const MainStack = createStackNavigator();
const RootStack = createStackNavigator();

function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="Home" component={HomeScreen} />
      <MainStack.Screen name="Details" component={DetailsScreen} />
    </MainStack.Navigator>
  );
}

function RootStackScreen() {
  return (
    <RootStack.Navigator mode="modal">
      <RootStack.Screen
        name="Main"
        component={MainStackScreen}
        options={{ headerShown: false }}
      />
      <RootStack.Screen name="MyModal" component={ModalScreen} />
    </RootStack.Navigator>
  );
}

需要注意的有一下几点:

  • 当我们使用MainStackScreen作为RootStackScreen的屏幕组件时,就相当于我们在一个堆栈导航器中嵌入了另一个堆栈导航器。在这种场景下对我们是非常有用的,因为我们想要使用不同的屏幕过度风格。这样,RootStackScreen会渲染一个堆栈导航器,该导航器有自己的头部,我们也可以将这个头部隐藏。将来的话,这个对于tab导航器也是很重要的,例如我们给每一个标签栏嵌套一个堆栈导航器,直观上来看,这就是你所期望的:当你在标签页A上并且想要跳转到标签页B上,在浏览标签页B的同时保持住标签页A的导航状态。我们来看一下下面的简图来查看上面例子中的导航架构

React Navigation5.x 第九章 全面屏model

  • 堆栈导航器的model属性值可以是card(默认)或者model。在IOS上,model的展现方式是从底部滑入,并且允许用户已从上往下轻扫的方式来关闭它。在Android上,model是无效的属性,因为全面屏的model与android的平台自带的行为没有任何区别。
  • 当我们调用navigate方法的时候,我们没必要指定任何具体的路径,也没必要纠结于其属于哪个堆栈导航器,React Navigation会在已关闭的导航器中查找该路径并且跳转过去。为了验证这个,我们再次来看上面的简图并且想象一下navigate路由请求会从HomeScreen逐级上升到MainStack中,我们知道MainStack也不能处理这个路由MyModal,所以它会继续上升到RootStack,这个导航器可以处理这个路由请求。

总结

  • 想要变更堆栈导航器页面的过渡动画你可以使用mode属性。当将其设置为modal时,所有屏幕转换之间的过渡动画就会变为从底部滑到顶部,而不是原先的从右侧滑入。其会对整个堆栈导航器起效,所以为了在其他屏幕上使用从右侧滑入的效果,我们可以为另外添加导航器,这个导航器使用默认的配置就行。
  • navigation.navigate方法会逐级向上便利整个导航树,知道找到可以处理导航路由请求的导航器。

 

相关标签: React Navigation