如何在反应原生中导航到下一个组件时完成当前组件

Question

嗨,我正在尝试使用navigate函数导航到下一个组件.我react-navigation用于多个组件之间的导航.

假设我有index.android.js和DashboardScreen.js组件.我试图DashboardScreen.js从索引组件导航到组件.

它正在导航,但索引组件始终保留在组件堆栈中.当我按回然后打开index.android.js它不应该.有谁知道如何管理这个react-native.在Android中,finish()适用于此.

navigate("DashboardScreen");

当我从SplashScreen那里航行到EnableNotification那时SplashScreen应该被摧毁,如果我从EnableNotification那里航行到CreateMessage那时EnableNotification应该被摧毁,如果我从CreateMessage那里航行到DashboardScreen那时CreateMessage应该被摧毁.截至目前,没有任何组件被销毁.

index.android.js

class SplashScreen extends Component {
  render() {
    if (__DEV__) {
      console.disableYellowBox = true;
    }

    const { navigate } = this.props.navigation;

    AsyncStorage.getItem("@ProductTour:key").then(value => {
      console.log(value);
      if (value) {
        navigate("DashboardScreen");
      }
    });

    return (
     ....
    );
  }
}

const App = StackNavigator(
  {
    Splash: {
      screen: SplashScreen,
      navigationOptions: {
        header: {
          visible: false
        }
      }
    },
    EnableNotification: {
      screen: EnableNotificationScreen,
      navigationOptions: {
        header: {
          visible: false
        }
      }
    },
    CreateMessage: {
      screen: CreateMessageScreen,
      navigationOptions: {
        header: {
          visible: false
        }
      }
    },
    DashboardScreen: {
      screen: DashboardScreen,
      navigationOptions: {
        header: {
          visible: false
        }
      }
    }
  },
  {
    initialRouteName: "Splash"
  }
);

Answer 1

只需使用“ 替换 ”代替“ 导航 ”

this.props.navigation.replace('Your Next Component Name')

Answer 2

首先，在同步函数（尤其是生命周期函数）中使用 AsyncStorage 是一个坏主意。您通常应该将 ASyncStorage 保留在文件夹/应用程序结构中对您访问/保存数据的位置有意义的位置，但由于这不是问题，我将在这里快速提及它......

基本上，您要求在 ASync 方法根据每个渲染完成自身后进行导航...那些刚接触 RN 的人应该知道，有很多事情可能会导致渲染触发。某些情况下，在完成最后一次渲染之前，渲染函数可能会触发（我以前见过很多次）10 次或更多次。这意味着您将触发 ASyncStorage 方法 10 次……在实现这些东西时绝对需要考虑一些事情。因此，或多或少，.then();AsyncStorage 函数的部分在渲染已经完成它的工作之后很长时间才会触发。如果这是一种合理的使用方法，我会说将return渲染函数的部分放在.then((value) => { return ( ... ); });. 但这是一个更糟糕的想法。基本上，您在这里需要正确的生命周期方法，而不是渲染方法。

不管怎样，由于我之前从未使用过这个组件库，所以我只能帮助您朝正确的方向前进，所以这里...他们网页上的这些文档似乎说您需要对传递给组件的道具导航器的引用你正在使用它。因此，如果您在此类中创建导航器，您将使用this.refs.whateverYouNamedTheNavigatorReference.navigate('SomeItemName'). 如果您位于已将此导航器作为 prop 传递的类中，则可以使用this.props.passNavigatorPropName.navigate('SomeItemName'). 我看到您正在使用变量解构来获取回调navigate，但我会谨慎这样做，因为我已经看到它通过意外获取旧版本的导航函数或其父引用并导致级联错误效果而导致错误。

另外，如果您打算在组件文件中使用 ASyncStorage（再次建议将其放在组件/类中，您的数据可以在整个应用程序中访问......），并且您将使用它来决定应用程序应该向前/向后导航...绝对将其从渲染函数中删除并将其放入可能的 constructor 、componentWillReceiveProps或生命周期函数中。这样它就会根据更新、新传递的 prop obj 或组件构建时触发一次。任何事情都比每次渲染都触发它要好。componentDidReceivePropscomponentWillUpdate

最后，我不知道您为StackNavigator路由堆栈对象设置了什么，但您需要其中使用的关键字“DashboardScreen”指向已正确导入的实际组件。“DashboardScreen”关键字很可能会在您的StackNavigator对象中连接到某些组件导入，如下所示......

import Dashboard from '../Views/DashboardScreenView';

StackNavigator({
  DashboardScreen: {
    screen: Dashboard,
    path: 'dashboard/:main',
    navigationOptions: null,
  },
});