Question

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

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

有没有办法实现这一目标？

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>
    );
  }
}

有没有一种方法可以动态地向React Native Stack导航中添加新路由

3 个答案: