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的导航状态。我们来看一下下面的简图来查看上面例子中的导航架构

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

总结

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