如何在反应导航中的不同嵌套堆栈之间导航

Question

The Goal

使用反应导航，从导航器中的屏幕导航到不同导航器中的屏幕。

More Detail

如果我有以下导航器结构：

• 父导航器 嵌套导航器1 屏幕A. 屏幕B. 嵌套导航器2 屏幕C. 屏幕D.

如何从嵌套导航器2下的屏幕D转到嵌套导航器1下的屏幕A？现在，如果我尝试navigation.navigate从屏幕D屏幕A，将会出现一个错误，表示它不知道屏幕A，只有屏幕C和D.

我知道在本网站的各个地方以及GitHub（https://github.com/react-navigation/react-navigation/issues/983，https://github.com/react-navigation/react-navigation/issues/335#issuecomment-280686611）都有各种形式的问题但是对于一些基本的东西，缺乏明确的答案并滚动浏览数百个GitHub评论寻找解决方案太棒了

也许这个问题可以编写如何为每个遇到这个非常常见问题的人做这件事。

Answer 1

您可以使用qazxsw poi指定子操作。

例如，如果要从嵌套导航器2下的屏幕D转到嵌套导航器1下的屏幕A：

third parameter of navigate

此外，如果您使用的是嵌套导航器，请务必检查this.props.navigation.navigate('NestedNavigator1', {}, NavigationActions.navigate({ routeName: 'screenB' })) 。

Answer 2

React Navigation v3：

Common mistakes现在将一个对象作为参数。您设置堆栈名称，然后导航到该堆栈中的路由，如下所示...

Navigation.navigate

'YOUR_STACK'是您创建它时调用堆栈的任何内容...

navigation.navigate(NavigationActions.navigate({
    routeName: 'YOUR_STACK',
    action: NavigationActions.navigate({ routeName: 'YOUR_STACK-subRoute' })
}))

Answer 3

Complete freedom: singleton w/ navigationOptions

如果您有多个导航堆栈和子堆栈的情况，那么知道如何在设置React Navigation的情况下获取对所需堆栈的引用会很令人沮丧。如果您在任何给定时间只能引用任何特定堆栈，这将更容易。这是如何做。

1. 创建一个特定于要在任何位置引用的堆栈的单例。 YOUR_STACK: createStackNavigator({ subRoute: ... })
2. 使用navigatorOptions在所需的导航器上设置参考

   // drawerNavigator.js . (or stackWhatever.js)
   const nav = {}
   export default {
     setRef: ref => nav.ref = ref,
     getRef: () => nav.ref
   }

3. 现在你可以在里面或外面的任何地方引用

   import { createBottomTabNavigator } from 'react-navigation'
   import drawerNavigation from '../drawerNavigator'
   
   const TabNavigation = createBottomTabNavigator(
     {
       // screens listed here
     },
     {
       navigationOptions: ({ navigation }) => {
         // !!! secret sauce set a reference to parent
         drawerNavigation.setRef(navigation)
         return {
           // put navigation options
         }
       }
     }
   )

   drawerNavigator

说明

在第2步中，选项卡导航器是抽屉导航器中的一个屏幕。 Tab Navigator需要关闭抽屉，但也需要关闭应用程序中的任何位置，执行此步骤后，您可以调用

// screen.js
import drawerNavigator from '../drawerNavigator'

export default class Screen extends React.Component {
  render() {
    return (
      <View>
        <TouchableHighlight onPress={() => drawerNavigator.getRef().openDrawer()}>
          <Text>Open Drawer</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

。您不仅限于在该步骤之后直接访问props.navigation。

Answer 4

在处理反应原生项目时，我遇到了同样的情况。我已尝试多种方式导航到屏幕但失败了。

经过多次试验，我尝试将父母导航对象传递给孩子，并进行了导航功能调用并且有效。

现在解决您的问题，如果您想从屏幕D导航到屏幕A，请执行以下步骤。

- >使用screenProps将嵌套导航器2导航道具传递给其子项。

drawerNavigator.getRef().closeDrawer()

您可以使用儿童接收导航

export default class Home extends Component {
    static navigationOptions = {
        header:null
    };

    constructor(props) {
        super(props);
        this.state = {
            profileData: this.props.navigation.state.params,
            route_index: '',
        }
    }

    render() {
        return (
            <ParentNavigator screenProps={this.props.navigation} />
        );
    }
}

export const ParentNavigator = StackNavigator({
  // ScreenName : { screen : importedClassname }
  Nested1: { screen: nested1 },
  Nested2: { screen : nestes1 }
});

export const nested1 = StackNavigator({
  ScreenA: { screen: screenA },
  ScreenB: { screen : screenB }
});

export const nested2 = StackNavigator({
  ScreenC: { screen: screenC },
  ScreenD: { screen : screenD }
});

现在，此navigate（）可用于在子项之间导航。

我接受这个过程有点令人困惑，但我找不到任何解决方案，因此我必须完成我的要求。

Answer 5

我发现了这样的解决方案const {navigate} = this.props.screenProps.navigation; ：

here

Answer 6

onPress={() =>
    Promise.all([
    navigation.dispatch(
        NavigationActions.reset({
            index: 0,
            // TabNav is a TabNavigator nested in a StackNavigator
            actions: [NavigationActions.navigate({ routeName: 'TabNav' })]
        })
    )
    ]).then(() => navigation.navigate('specificScreen'))
}

 const subAction = NavigationActions.navigate({ routeName: 'SignInScreen' });
      AsyncStorage.clear().then(() =>
        this.props.navigation.navigate('LoggedOut', {}, subAction));

是放置signIn屏幕的堆栈名称。