reactjs - 有没有办法动态地将新路由添加到 React 本机堆栈导航中

Question

我们正在构建一个使用 React 本机堆栈导航的应用程序，取决于基于输出的 web api 调用，我们希望将重定向添加到具有不同数据的相同类型的屏幕，并且新屏幕可以创建另一个屏幕..

我们在应用程序开始时使用带有单个路由的堆栈导航。基于 Web Api 调用，我想向现有堆栈注入一个新路由，它应该能够返回到以前的屏幕

有什么办法可以做到这一点。？

Answer 1

引自https://reactnavigation.org/docs/en/navigating.html

如果我们使用未在堆栈导航器上定义的路由名称调用 this.props.navigation.navigate，则不会发生任何事情。换句话说，我们只能导航到在我们的堆栈导航器上定义的路由——我们不能导航到任意组件。

Answer 2

我建议您为应用程序创建所有可能的路线，并根据 web api 将应用程序导航到您想要使用任何数据的屏幕。全取决于你。

Answer 3

根据 React Navigation Documents，您可以随时更改堆栈：

index是您要在新actions的路线数组上导航的路线的索引。（在这种情况下，我们要导航到路线'NewRoute'，它index是1）

import {StackActions, NavigationActions} from "react-navigation"

class Example extends Component {

  // ... Some other methods

  navigate = (id) => {
    const resetAction = StackActions.reset({
      index: 1,
      actions: [
        NavigationActions.navigate({ routeName: 'Home' }),
        NavigationActions.navigate({ routeName: 'NewRoute', params: { id, ...otherParams } }),
      ],
    });
    this.props.navigation.dispatch(resetAction);
  }

  render() {
    return (
      <View>
        <TouchableOpacity onPress={() => this.navigate()}>
          <Text>Go to New Route</Text>
        </TouchableOpacity>
      </View>
    );
  }
}