從內屏返回到父屏

Question

我有這樣的堆棧導航器結構

index.js-> App.js-> LoginStck，HomeNavStack成功登錄后，從LoginStck轉到HomeNavStack，從此同時我將堆棧重置為只有HomeNavStack（這樣做是為了避免在返回時避免登錄屏幕）在HomeStack中4個標簽，分別是首頁/付款/配置文件/更多，每個標簽具有單獨的堆棧。 我導航到“更多”選項卡中的“更多屏幕”，並退出，我需要進入“登錄堆棧”（第一個丟棄所有其他屏幕的屏幕）。

我確實嘗試過這個`

dothis = async () => {
const someAction = StackActions.reset({
  index: 0,
  key: null,
  actions: [
    NavigationActions.navigate({ routeName: 'HomeNavigatorNew'})
  ]
});
this.props.navigation.navigate(someAction)

}

但是沒有用 有什么見解.... ?? 提前致謝

`

Answer 1

在登錄屏幕和其他屏幕之間切換的推薦方法是使用createSwitchNavigator 。

有關更多信息，請檢查：

https://reactnavigation.org/docs/en/switch-navigator.html#docsNav

我創建了一個簡單的示例，可以為您的案例提供幫助：

import React from 'react';
import {
  View,
  Text,
  Button,
} from 'react-native';
import {
  createStackNavigator,
  createBottomTabNavigator,
  createSwitchNavigator,
} from 'react-navigation';

class LoginScreen extends React.Component {
  render() {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <Text>LoginScreen</Text>
          <Button
              title={'Login'}
              onPress={() => this.props.navigation.navigate('HomeStack')}
          />
        </View>
    )
  }
}

class PaymentScreen extends React.Component {
  render() {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <Text>PaymentScreen</Text>
        </View>
    )
  }
}

class ProfileScreen extends React.Component {
  render() {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <Text>ProfileScreen</Text>
        </View>
    )
  }
}

class MoreScreen extends React.Component {
  render() {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <Text>MoreScreen</Text>
          <Button
              title={'Logout'}
              onPress={() => this.props.navigation.navigate('LoginStack')}
          />
        </View>
    )
  }
}

const PaymentStack = createStackNavigator(
    {
      Payment: PaymentScreen,
    }
);

const ProfileStack = createStackNavigator(
    {
      Profile: ProfileScreen,
    }
);

const MoreStack = createStackNavigator(
    {
      More: MoreScreen,
    }
);

const HomeStack = createBottomTabNavigator(
    {
      PaymentStack: PaymentStack,
      ProfileStack: ProfileStack,
      MoreStack: MoreStack,
    }
);

const LoginStack = createStackNavigator(
    {
      Login: LoginScreen,
    }
);

export default createSwitchNavigator(
    {
      LoginStack: LoginStack,
      HomeStack: HomeStack,
    }
);