删除 'Back' 按钮

Question

我正在使用 React-Navigation，但我在使用导航栏时遇到了问题。我有一个名为 LoginScreen 的页面，它在用户登录后将其移动到 HomeScreen。我遇到的问题是我在主屏幕上有一个 'back' 按钮，所以我可以返回登录屏幕（我不想要）这是代码：

LoginScreen（我导航到主屏幕的地方）：

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

导航在里面 render():

const { navigate } = this.props.navigation;

这是我调用 handlePress 的地方：

<TouchableOpacity style={styles.logBtn} onPress={()=>this.handlePress(navigate)}>
  <Text style={styles.logTxt}>
  Login
  </Text>
</TouchableOpacity>

我搜索了一下并尝试在 handlePress 中写入 navigate.replace("Home");，但它就是无法导航。

我做错了什么？

Answer 1

我认为你最好的办法是重置导航，你可以通过重置来完成：

import { NavigationActions } from 'react-navigation';


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

您可以在此处找到它或阅读更多相关信息 react-navigation-doc

或者您可以更改后退按钮图标及其在主屏幕导航配置中的功能

static navigationOptions  = {
        title: 'Home',
        header: ({ navigate }) => {
        {/* left here refers to the left back button */}
            let left = (
                <TouchableOpacity onPress={() => navigate('Profile')} >
                    <Icon name="ios-menu-outline"
                    size={25} style={{ paddingRight: 5, paddingLeft: 20 }}
                    color="#ffffff" />
                </TouchableOpacity>
            );
            let style = { backgroundColor: '#00AFEF',elevation: 0,shadowOpacity: 0,};
            let titleStyle = { color: '#ffff', fontSize: 25, fontFamily: 'Arial' };
            return { left, style, titleStyle }
        },
    }

Answer 2

static navigationOptions={
    title:'Categories',
    headerLeft: (<View></View>),   };

适合我 ;)

删除 'Back' 按钮

Removing 'Back' button

react-native

react-navigation