Question

我刚刚开始反应原生，我没有移动经验，所以我有几个问题。主要是关于导航仪。

我有一个初始堆栈，类似这样（伪代码）

routes = [
    {scene: 1}, {scene: 2}, {scene: 3}
]

我在它们之间滑动。

现在，假设我想从第一个场景推出一个新场景（嵌套导航？）。我最终有了

routes = [
    {scene: 1}, {scene: 4 (pushed scene)}
]

这就是我被困住的地方。处理这个问题的正确方法是什么？我应该重置堆栈并失去转换，还是有办法将新场景推送到最后一个场景并最终得到类似

的内容

routes = [
    {scene: 1}, {scene: 2}, {scene: 3}, {scene: 4}
]

感谢您的帮助

Answer 1

首先，我强烈建议您阅读React Native导航器（https://facebook.github.io/react-native/docs/navigator.html）的官方文档。路线有很多功能。

在您的示例中，如果您只想从scene1添加新视图，可以在scene1中调用它

this.props.navigator.push(Routes.scene4);

在scene4中，你可以调用它来回到scene1，这不会影响你当前使用scene2和scene3的堆栈

this.props.navigator.pop()

好吧，让我们说你想在场景3中添加scene4，并且想要点击后退按钮返回到scene1（第一个场景）。你怎么能这样做？您可以调用以下函数

this.props.navigator.popToTop()

将您重定向到堆栈的最顶层 - scene1。

还有许多非常有用的功能：popToRoute（ANY_ROUTE_BEFORE_THIS），jumpTo（ROUTE_YOU_WANT）等。

Answer 2

您需要按照react-native教程进行添加导航。我将在此处列出一些步骤，

  npm install @react-navigation/native @react-navigation/stack
  npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

  cd ios
  pod install
  cd ..

之后（适用于ios），您可以将App替换为

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Home from './pages/Home'


const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ title: 'Welcome' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App

如何在react-native中向navigator添加路由

2 个答案: