NavigationActions.reset不是一个函数?

Mor*_*ton 18 react-native react-navigation

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

当我使用https://github.com/react-navigation/react-navigation/issues/295中的代码时.我收到错误:

NavigationActions.reset is not a function
Run Code Online (Sandbox Code Playgroud)

我console.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);
Run Code Online (Sandbox Code Playgroud)

Ali*_* Sn 77

在版本> 2的反应导航中,您可以使用此代码重置堆栈:

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

我希望这个能帮上忙...

  • 是的,它的解决方案.非常感谢你 ! (2认同)

meh*_*mpt 14

如果你使用嵌套路由器,你还需要设置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)
Run Code Online (Sandbox Code Playgroud)

  • 我使用createBottomTabNavigator在底部选项卡导航器下链接了3个堆栈导航器.即使我添加`key:null`,它仍然会查看当前活动的导航器= / (3认同)
  • 我通过设置`key:MyRouteThatHasTargetScreen`和`NavigationActions.navigate({routeName:'TargetScreen'})`使其工作。希望这可以帮助! (2认同)