React Navigation - 动画、替换屏幕和标签

Question

我在我的应用程序中使用 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 的一部分（与朋友屏幕一起使用。）我在网上搜索但找不到如何执行此操作。你们能帮帮我吗？给我信息 sources/examples。提前致谢！

Answer 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.
        }); 
       }

Answer 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'}),
    ],
});

React Navigation - 动画、替换屏幕和标签

React Navigation - Animating, Replacing screens and Tabs

react-native

react-navigation