反应导航，返回嵌套导航答案

【问题标题】：react navigation, go back with nested navigation反应导航，返回嵌套导航
【发布时间】：2020-08-01 21:14:56
【问题描述】：

Stack Navigator :
 - Login
 - Register
 - Activation
 - Tab Navigator
    + Home
    + Histories
    + Cart
    + Profile
 - Outlet
 - Product

我在返回导航时遇到问题，当我在产品屏幕中时，我可以使用 navigation.navigate('Cart'); 转到“购物车屏幕”，但在“购物车屏幕”和 goBack() 中时，我的屏幕会转到“主屏幕” . 如何管理goBack()从栈屏到标签屏？

【问题讨论】：

使用props（自定义导航器）或使用context-api或redux发送该部分的navigation，然后出于性能原因在popToTop之后触发它并避免内存泄漏。

标签： react-native react-navigation react-navigation-v5

【解决方案1】：

在 react-navigation（5 之前）中，我确实做到了你所说的，使用像这样的自定义导航组件将上部导航作为向下传递的道具：



// this component's navigation is replaced by upper navigation, you can send another prop if you need both navigations.
const MyComponent0 = createStackNavigator(
  {
    Child1: {
      screen: Child1,
      navigationOptions: ({navigation}) => {
        return {
          headerRight: (
            // you can use BackButton of library with import it, I wrote my own, that time i didn't know there is a ready importable back button.
            <TouchableOpacity
              style={{paddingLeft: 10}}
              onPress={() => navigation.toggleDrawer()}>
              <Icon ios="ios-menu" android="md-menu" style={{color: '#fff'}} />
            </TouchableOpacity>
          ),
          headerTitle: <Text style={styles.whiteText}>Child1 title</Text>,
          headerLeft: (
            <HeaderBackButton
              style={{color: '#FFF'}}
              onPress={() => navigation.goBack(null)}
            />
          ),
        };
      },
    },
    Child2,
    ...
  },
  {
    defaultNavigationOptions: {
      headerTitleStyle: {
        color: '#fff',
        fontSize: 13,
        ...Platform.select({
          android: {
            fontFamily: ...,
          },
          ios: {
            fontFamily: ...,
          },
        }),
      },
      headerStyle: {
        backgroundColor: 'rgba(0,0,0,1)',
      },
      headerTintColor: 'white',
    },
  },
);


class MyComponent1 extends Component {
  constructor() {
    super();
  }
  static router = MyComponent0.router;

  render() {
    return <MyComponent0 navigation={this.props.navigation} />; // you can send like navigation1 if you need downward navigation too.
  }
}

此代码采用旧方法，但它在 5 之前使用 react-navigation 工作。希望对您有所帮助。

【讨论】：

【解决方案2】：

你可以用这个方法

    const goNext = () => {
                navigation.navigate('componentWithDrawer', {
                    screen: next_screen,
                    params: { previous_screen: current_srceen }
                }, next_screen)
                navigation.toggleDrawer()
            }
}

然后返回

const goBack = () => {
                navigation.navigate('componentWithDrawer', {
                    screen: useRoute().params.previous_screen,
                }, next_screen)
                navigation.toggleDrawer()
            }
}

【讨论】：