# 打开一个全屏模式

模态显示临时阻塞与主视图交互的内容。

模态就像一个弹出窗口 —— 它不是你的主要导航流的一部分 —— 它通常有一个不同的过渡,一个不同的方式来解散它,并打算集中在一个特定的内容或交互部分。

将其作为 React Navigation 基本原理的一部分进行解释,不仅是因为这是一个常见的用例,还因为实现需要嵌套导航器的知识,而嵌套导航器是 React Navigation 的重要组成部分。

# 创建模态堆栈

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 呈现堆栈导航器并有自己的头,我们还希望隐藏此屏幕的头。在未来,这将是很重要的,因为对于选项卡导航,例如,每个选项卡可能有自己的堆栈! 直观地说,这就是你所期望的:当你在选项卡 A 切换到选项卡 B 时,你希望选项卡 A 保持它的导航状态,同时你继续浏览选项卡 B。

堆栈导航器的mode属性可以是 card(默认)或 modalmodal 行为将屏幕从 iOS 的底部滑动进来,并允许用户从顶部向下滑动来撤销它。modal 属性在 Android 上没有效果,因为全屏模态在平台上没有任何不同的过渡行为。

当我们调用 navigate 时,我们不需要指定任何东西,除了我们想导航到的路由。没有必要限定它属于哪个堆栈(任意命名的'root'或'main'堆栈)- React Navigation 尝试在最近的导航器上找到路由,然后在那里执行操作。为了将其可视化,请再次查看上面的树形图,并想象 navigate 操作从 HomeScreen 流向 MainStack。我们知道 MainStack 不能处理 MyModal 路由,所以它会把它流到 RootStack,而 RootStack 可以处理该路由,它就这样做了。

# 总结

  • 要更改堆栈导航器上的转换类型,可以使用 mode 属性。当设置为 modal 时,所有屏幕都会从下往上移动,而不是从右向左。这适用于整个堆栈导航器,因此为了在其他屏幕上使用从右到左的转换,我们添加了另一个带有默认配置的导航堆栈。
  • navigation.navigate 导航遍历导航器树以找到可以处理 navigate 操作的导航器。