NavigationActions.reset 不是函数？

Question

我创建的项目有一个Welcome 屏幕导航到MainActivity 屏幕。我希望当用户单击后退按钮时，它将关闭MainActivity 中的应用程序，而不是回到Welcome 屏幕。我使用库 react-navigation，所以我从 Github 寻找一些解决方案。

当我使用来自https://github.com/react-navigation/react-navigation/issues/295 的代码时。我得到了错误：

NavigationActions.reset is not a function

我控制台.log(NavigationActions);

显然没有重置。但是为什么其他人都可以使用该代码？

我想不通。任何帮助，将不胜感激。提前致谢。

这是我的 Welcome.js：

import React, { Component } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { NavigationActions } from 'react-navigation';
import { connect } from 'react-redux';
import { ColorSetting } from './common/ColorSetting';
import { fetchMainMovieList } from '../actions';

class Welcome extends Component {
  static navigationOptions = {
    header: null,
  };

  componentDidMount() {
    // call main page data first
    this.props.fetchMainMovieList();

    this.timer = setTimeout(() => { 
      this.navigateToMainActivity();
    }, 3000);
  }
  componentWillUnmount() {
    // if this.timer existed，then use clearTimeout to remove it.
    this.timer && clearTimeout(this.timer);
  }

  navigateToMainActivity() {
    console.log(NavigationActions);
    const resetAction = NavigationActions.reset({
      index: 1,
      actions: [
        NavigationActions.navigate({ routeName: 'MainActivity' })
      ]
    });

    this.props.navigation.dispatch(resetAction);
  }

  render() {
    return (
      <View>
        <Text>Three !</Text>
      </View>
    );
  }
}

export default connect(null, { fetchMainMovieList })(Welcome);

Answer 1

V5.x 更新：

import { CommonActions } from '@react-navigation/native';


const resetAction = CommonActions.reset({
    index: 1,
    routes: [{ name: YOUR_ROUTE_NAME, params: { YOUR_OPTIONAL_DATA } }]
});
navigation.dispatch(resetAction);

---

在 react navigation 的 >2 版本中，您可以使用此代码重置堆栈：

    import { NavigationActions, StackActions } from 'react-navigation';
    const resetAction = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'MainActivity' })],
        });
    this.props.navigation.dispatch(resetAction);

我希望这会有所帮助...

Answer 2

如果您使用的是嵌套路由器，您还需要将 key 设置为 null，否则它将继续查看当前活动的导航器。

import { NavigationActions, StackActions } from 'react-navigation'
const resetAction = StackActions.reset({
    index: 0,
    key: null, // <-- this
    actions: [NavigationActions.navigate({ routeName: route })]
})
this.props.navigation.dispatch(resetAction)

Answer 3

import { CommonActions,useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

const resetAction = CommonActions.reset({
        index: 0,
        routes: [{ name: 'MainActivity' }],});
      
       navigation.dispatch(resetAction);

document

如果你使用 react-navigation 5.0，你可以这样做

Answer 4

navigateToMainActivity(){
this.props.navigation.dispatch(StackActions.reset({
  index:0,
  actions:[
    NavigationActions.navigate({routeName:'MainActivity'})
  ] 
   })
  );
 }

Answer 5

在 react-navigation v5 中，您可以像这样用 MainActivity 屏幕替换初始屏幕

import {StackActions} from '@react-navigation/native'; navigation.dispatch(StackActions.replace('MainActivity'));