Tắt nút quay lại trong điều hướng phản ứng

Tôi đang sử dụng điều hướng gốc phản ứng (react-navigation) StackNavigator. nó bắt đầu từ trang Đăng nhập trong toàn bộ vòng đời của ứng dụng. Tôi không muốn có tùy chọn quay lại, quay lại màn hình Đăng nhập. Có ai biết làm thế nào nó có thể được ẩn trên màn hình sau khi màn hình đăng nhập? BTW, tôi cũng đang ẩn nó trong màn hình đăng nhập bằng cách sử dụng:

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  // ... other screens here
})

1) Để làm cho nút quay lại biến mất trong điều hướng phản ứng v2 hoặc mới hơn:

navigationOptions:  {
    title: 'MyScreen',
    headerLeft: null
}

2) Nếu bạn muốn làm sạch ngăn xếp điều hướng:

Giả sử bạn đang ở trên màn hình mà bạn muốn điều hướng từ đó:

Nếu bạn đang sử dụng phiên bản điều hướng phản ứng v5 hoặc mới hơn, bạn có thể sử dụng navigation.resethoặc CommonActions.reset:

 // Replace current navigation state with a new one,
 // index value will be the current active route:

navigation.reset({
  index: 0,
  routes: [{ name: 'Profile' }],
});

Nguồn và thêm thông tin tại đây: https://reactnavigation.org/docs/navigation-prop/#reset

Hoặc là:

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

Nguồn và thêm thông tin tại đây: https://reactnavigation.org/docs/navigation-actions/#reset

Đối với các phiên bản cũ hơn của điều hướng phản ứng:

sử dụng v2-v4StackActions.reset(...)

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

const resetAction = StackActions.reset({
  index: 0, // <-- currect active route from actions array
  actions: [
    NavigationActions.navigate({ routeName: 'myRouteWithDisabledBackFunctionality' }),
  ],
});

this.props.navigation.dispatch(resetAction);

sử dụng v1NavigationActions.reset

3) Đối với Android, bạn cũng sẽ phải tắt nút quay lại phần cứng bằng Trình điều khiển quay lại :

http://reactnative.dev/docs/backhandler.html

hoặc nếu bạn muốn sử dụng hook:

https://github.com/react-native-community/hooks#usebackhandler

nếu không, ứng dụng sẽ đóng khi nhấn nút quay lại phần cứng android nếu ngăn xếp điều hướng trống.

Bạn đã xem xét sử dụng this.props.navigation.replace( "HomeScreen" )thay vì this.props.navigation.navigate( "HomeScreen" ).

Bằng cách này, bạn không thêm bất cứ thứ gì vào ngăn xếp. vì vậy Màn hình chính sẽ không vẫy bất cứ thứ gì để quay lại nếu nút quay lại được nhấn trong Android hoặc màn hình được vuốt sang phải trong IOS.

Thêm thông tin kiểm tra Tài liệu . Và tất nhiên bạn có thể ẩn các nút quay lại bằng cách thiết lập headerLeft: nulltrongnavigationOptions

Bạn có thể ẩn nút quay lại bằng cách sử dụng left:null, nhưng đối với thiết bị Android, nó vẫn có thể quay lại khi người dùng nhấn nút quay lại. Bạn cần đặt lại trạng thái điều hướng và ẩn nút vớileft:null

Đây là tài liệu để đặt lại trạng thái điều hướng: https://reactnavigation.org/docs/navigators/navigation-actions#Reset

Giải pháp này hoạt động cho react-navigator 1.0.0-beta.7, tuy nhiên left:nullkhông còn hoạt động cho phiên bản mới nhất.

Chúng ta cần đặt false thành gesturesEnabledcùng với headerLeftto null. Vì chúng ta cũng có thể điều hướng trở lại bằng cách vuốt màn hình.

navigationOptions:  {
   title: 'Title',
   headerLeft: null,
   gesturesEnabled: false,
}

bằng cách sử dụng BackHandler từ react native đã làm việc cho tôi. Chỉ cần bao gồm dòng này trong ComponentWillMount của bạn:

BackHandler.addEventListener('hardwareBackPress', function() {return true})

nó sẽ vô hiệu hóa nút quay lại trên thiết bị Android.

tự tìm thấy nó;) thêm:

  left: null,

vô hiệu hóa nút quay lại mặc định.

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  FirstPage: {
    screen: FirstPage,
    navigationOptions: {
      title: "FirstPage",
      header: {
        left: null,
      }
    },
  },

phiên bản điều hướng phản ứng> = 1.0.0-beta.9

navigationOptions:  {
   headerLeft: null
}

Tùy chọn tốt nhất để xử lý tình huống này là sử dụng SwitchNavigator do React điều hướng cung cấp . Mục đích của SwitchNavigator là chỉ hiển thị một màn hình tại một thời điểm. Theo mặc định, nó không xử lý các hành động quay lại và nó đặt lại các tuyến đường về trạng thái mặc định của chúng khi bạn chuyển đi. Đây là hành vi chính xác cần thiết trong quy trình xác thực.

Đây là một cách điển hình để thực hiện nó.

1. Tạo 2 trình điều hướng ngăn xếp: Một để xác thực (đăng nhập, đăng ký, quên mật khẩu, v.v.) và một cho APP chính
2. Tạo một màn hình trong đó bạn sẽ kiểm tra tuyến đường nào từ bộ điều hướng công tắc mà bạn muốn hiển thị (tôi thường kiểm tra điều này trong màn hình hiển thị bằng cách kiểm tra xem mã thông báo có được lưu trữ trong bộ nhớ Async hay không)

Đây là một triển khai mã của các câu lệnh trên

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from "./homeScreenPath" 
import OtherScreen from "./otherScreenPath"
import SignInScreen from "./SignInScreenPath" 
import SplashScreen from "./SplashScreenPath"

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });

const AuthStack = createStackNavigator({ SignIn: SignInScreen });


export default createAppContainer(
  createSwitchNavigator(
    {
      Splash: SplashScreen,
      App: AppStack,
      Auth: AuthStack,
    },
    {
      initialRouteName: 'Splash',
    }
  )
);

Bây giờ trong SplashScreen, bạn sẽ kiểm tra mã thông báo và điều hướng phù hợp

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

class SplashScreen extends React.Component {
  componentDidMount() {
    this.checkIfLogin();
  }

  // Fetch the token from storage then navigate to our appropriate place
  checkIfLogin = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this splash
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

Khi bạn thay đổi các tuyến đường trong SwitchNavigator, nó sẽ tự động xóa tuyến đường cũ hơn và do đó nếu bạn nhấn nút quay lại, nó sẽ không đưa bạn đến màn hình xác thực / đăng nhập nữa

Chúng tôi có thể sửa nó bằng cách đặt headerLeft thành null

static navigationOptions =({navigation}) => {
    return {
        title: 'Rechercher une ville',
        headerLeft: null,
    }  
}

Các SwitchNavigator sẽ là cách để thực hiện điều này. SwitchNavigatorđặt lại các tuyến mặc định và ngắt kết nối màn hình xác thực khi navigatehành động được gọi.

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

Sau khi người dùng chuyển đến SignInScreen và nhập thông tin đăng nhập của họ, sau đó bạn sẽ gọi

this.props.navigation.navigate('App');

Đơn giản là làm

headerLeft: null

có thể không được chấp nhận vào thời điểm bạn đọc câu trả lời này. Bạn nên sử dụng sau

   navigationOptions = {
        headerTitle : "Title",
        headerLeft : () => {},
    }

Đối với phiên bản mới nhất React Navigation 5 với Typescript:

<Stack.Screen
    name={Routes.Consultations}
    component={Consultations}
    options={{headerLeft: () => null}}
  />

ReactNavigation v 5.0 - Tùy chọn ngăn xếp:

options={{
headerLeft: () => { 
 return <></>; 
}
}}

Tôi nghĩ rằng nó đơn giản chỉ cần thêm headerLeft : null, tôi đang sử dụng cli gốc phản ứng, vì vậy đây là ví dụ:

static navigationOptions = {
    headerLeft : null
};

Đối với phiên bản mới nhất của React Navigation, ngay cả khi bạn sử dụng null trong một số trường hợp, nó vẫn có thể hiển thị "quay lại" được viết!

Truy cập điều này trong app.js chính của bạn dưới tên màn hình của bạn hoặc chỉ cần đi tới tệp lớp của bạn và thêm: -

static navigationOptions = {
   headerTitle:'Disable back Options',
   headerTitleStyle: {color:'white'},
   headerStyle: {backgroundColor:'black'},
   headerTintColor: 'red',
   headerForceInset: {vertical: 'never'},
   headerLeft: " "
}

Trong phiên bản mới nhất (v2) hoạt động headerLeft:null. bạn có thể thêm vào bộ điều khiển navigationOptionsnhư bên dưới

static navigationOptions = {
    headerLeft: null,
};

Đối với phiên bản điều hướng phản ứng 4.x

navigationOptions: () => ({
      title: 'Configuration',
      headerBackTitle: null,
      headerLayoutPreset:'center',
      headerLeft: null
    })

headerLeft: null

Điều này sẽ không hoạt động trong phiên bản gốc phản ứng mới nhất

Nó phải là:

navigationOptions = {
 headerLeft:()=>{},
}

Đối với bản ghi:

navigationOptions = {
 headerLeft:()=>{return null},
}