React 导航重置首先弹出然后导航

Question

我在我的应用程序中使用反应导航，当我使用重置来清除堆栈并导航到其他屏幕时，它会显示奇怪的动画，比如首先弹出堆栈中的所有屏幕，然后导航到新屏幕。

这里是代码

//重置堆栈的代码

登录.js

   const resetAction = NavigationActions.reset({
        index: 0,
        actions: [
            NavigationActions.navigate({routeName: 'Home'})
        ],
    })
   this.props.navigation.dispatch(resetAction)

Route.js

Home: {
    screen: Tab,
    navigationOptions: {
        ...headerStyle,
    }
},
Intro: {
    screen: IntroScreen,
    navigationOptions: {
        header: null
    }
},
LogIn: {
    screen: LogIn,
    navigationOptions: {
        ...headerStyle,
        title: 'LogIn',
    }
},

所以它先进入屏幕然后进入主屏幕，如何解决这个问题使其直接进入主屏幕

Answer 1

如果你删除

const resetAction = NavigationActions.reset({
        index: 0,
        actions: [
            NavigationActions.navigate({routeName: 'Home'})
        ],
    })
   this.props.navigation.dispatch(resetAction)

从您的 Login.js 然后堆栈导航器自动转到 StackNavigator 中的第一个屏幕，在这种情况下将是您的 Home: {...} 屏幕。

您无需重置堆栈。

如果您想通过按下按钮导航到另一个屏幕，请使用

import React, { Component } from 'react';
import {
  View,
  Button,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class Initial extends Component {

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>

          <Button
            onPress={() => navigate('Login')}
            title="Go to Login"
            color="#357DED"
          />

      </View>
    );
  }
}