Question

在反应导航中，知道按下后退按钮时有一种方法可以执行自定义操作。当用户滑动以返回到最后一个屏幕时，是否有类似的方法来执行此操作？

Answer 1

我能够确定应用程序是通过后退按钮返回还是使用路由器的getStateForAction功能向后滑动。如果需要，可以选择检查动作和状态变量以进行微调。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>Alert Messages</h2>
<p>Click on the "x" symbol to close the alert message.</p>
<div class="alert">
  <span class="closebtn">&times;</span>  
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

<div class="alert success">
  <span class="closebtn">&times;</span>  
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert info">
  <span class="closebtn">&times;</span>  
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert warning">
  <span class="closebtn">&times;</span>  
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>
</body>
</html>

Answer 2

在react-navigation v5.0中使用

所以我正在使用Pan-Responder处理swipe-back中的react-native iOS事件。

那我是怎么做到的：

在我的Navigator.js中，我添加了该应用程序的gestureEnabled: false功能。

const Funnel = createStackNavigator({
  page1: Page1,
  page2: Page2,
  page3: Page3,
}, {
  // headerMode: 'float',
  defaultNavigationOptions: ({ navigation }) => ({
    ...TransitionPresets.SlideFromRightIOS,
    gestureEnabled: false,
    header:
      (<SafeAreaView style={{ flex: 1 }} forceInset={{ bottom: 'never' }}>
        <AppHeader pageData={navigation.state.params == undefined ? data : navigation.state.params} />
      </SafeAreaView>),
  }),
})

因此通过以上代码，我能够删除iOS应用中的向后滑动功能。

现在我必须添加向后滑动功能。

  export let panResponder = (callback) => PanResponder.create({
  onMoveShouldSetResponderCapture: () => true,
  onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
    return Math.abs(gestureState.dx) > 5;
  },
  onPanResponderRelease: (evt, gestureState) => {
    if (Platform.OS != 'ios') return
    if (Math.floor(gestureState.moveX) >= 0 && Math.floor(gestureState.moveX) <= width / 2) {
      callback()
    }
  },
});

因此，通过使用上述代码，您将获得swipe-back事件的回调，您可以在其中添加navigation.goBack()功能。

如何在您的视图中添加PanResponser ：

 <View {...panResponder(backButtonCallback).panHandlers}/>

Answer 3

react-navigation文档中有一些示例： https://reactnavigation.org/docs/en/routers.html

我发现，从背面滑动时，设置为true的操作有一个立即参数，但在其他类型的背面中未定义此参数：

const MyApp = createStackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
}, {
  initialRouteName: 'Home',
})

const defaultGetStateForAction = MyApp.router.getStateForAction;

MyApp.router.getStateForAction = (action, state) => {
  if (state && action.type === 'Navigation/BACK' && action.immediate) {
    console.log('Perform custom action on swipe')
  }
  return defaultGetStateForAction(action, state);
};

Answer 4

React Navigation 5.7 引入了一种简单的方法来做到这一点，无需覆盖后退动作或滑动手势，基本上你拦截组件中的后退动作并在它发生之前执行回调：

import {useNavigation} from '@react-navigation/native';

const MyScreenComponent = (props) => {
  const navigation = useNavigation();

  React.useEffect(() => (
    navigation.addListener('beforeRemove', (e) => {
      // Prevent default behavior of leaving the screen (if needed)
      e.preventDefault();

      // Do whatever...
    })
  ), [navigation]);

  // Rest of component
}

在本例中，我使用 useNavigation 钩子访问 navigation 对象，但您也可以从 props 中提取它，这实际上取决于您的应用程序的构建方式。

Official documentation。

在向后滑动时执行操作（反应导航）

4 个答案: