React Navigation - 动画、替换屏幕和选项卡答案

【问题标题】：React Navigation - Animating, Replacing screens and TabsReact Navigation - 动画、替换屏幕和选项卡
【发布时间】：2017-11-01 08:04:57
【问题描述】：

我在我的应用程序中使用 React-Navigation，但我找不到做一些事情的方法。首先，我想更改过渡动画，但无论如何我都找不到这样做，如果你们能帮助我，我会很高兴。

第二，我有一个登录屏幕，登录时，用户被移动到主屏幕，在主屏幕上我有一个后退按钮，所以我可以再次登录（我不想要）我试过了使用此代码：

handlePress(navigate){
    firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){
      //Success, move to homepage.
      navigate.replace("Home");
    }).catch(function(error){
      //Failed to log in, print error.
    }); 
}

但它不起作用，没有任何反应（它不会导航到家），只有当我使用 navigate("Home"); 时它才会导航到家。

这是导航（内部渲染）：

const { navigate } = this.props.navigation;

第三，我的屏幕很少（登录、注册、主页和朋友），这是我的 StackNavigator：

const Stylelist = StackNavigator({
  Login:{
     screen: LoginScreen,
     navigationOptions: ({navigation}) =>({
       header: null,
     }),
  },
  Register:{
      screen: RegisterScreen,
      navigationOptions: ({navigation}) =>({
        header: null,
      }),
  },
  Home:{
     screen: HomeScreen,
     navigationOptions: ({navigation}) =>({
       header: "float",
       title: "Home",
     }),
  },
});

我希望主屏幕也成为 TabNavigator 的一部分（带有好友屏幕。）我在网上搜索但找不到如何做到这一点。你们能帮帮我吗？给我信息来源/例子。提前致谢！

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

这应该删除后退按钮见doc

import { NavigationActions } from 'react-navigation';


     handlePress(){
        firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){
          //Success, move to homepage.
          const resetAction = NavigationActions.reset({
          index: 0,
          actions: [
            NavigationActions.navigate({ routeName: 'Home'})
          ]
        })
        this.props.navigation.dispatch.(resetAction);
        }).catch(function(error){
          //Failed to log in, print error.
        }); 
       }

【讨论】：

【解决方案2】：

import {StackActions} from 'react-navigation';
import {NavigationActions} from 'react-navigation';

const resetAction = StackActions.reset({
    index: 1,
    actions: [
        // add other screen if you want
        NavigationActions.navigate({routeName: 'screen2'}),
        NavigationActions.navigate({routeName: 'newScreen'}),
    ],
});

【讨论】：