React-Navigation 增加向后滑动区域

Question

我正在为当前项目使用 React-Navigation 库，不喜欢向后滑动功能。仅当您将手指放在屏幕的整个边缘以使手势向后滑动时，它才会被触发。我已阅读 API Reference 但没有找到任何关于我的行为问题的信息。

Answer 1

您可以通过以下方式增加向后滑动的区域：

const stack = createStackNavigator({
   Home,
   ...
}, {
   ...
   navigationOptions: {
      gestureResponseDistance: {horizontal: 100} // default is 25
   }
})

Answer 2

只是反应导航 v5 的更新答案/gestureResponseDistance

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();


// ...in render() method
<NavigationContainer>
  <Stack.Navigator mode="modal">
    <Stack.Screen name="Screen1" component={Screen1} />
    <Stack.Screen name="Screen2" component={Screen2} options={{ gestureResponseDistance: { vertical: 200, horizontal: 150 } }} />
  </Stack.Navigator>
</NavigationContainer>

https://reactnavigation.org/docs/stack-navigator/#gestureresponsedistance

或在 <Navigator> 上对所有屏幕使用 screenOptions 道具：

<NavigationContainer>
  <Stack.Navigator mode="modal" screenOptions={{ gestureResponseDistance: { vertical: 200, horizontal: 150 } }}>
    <Stack.Screen name="Screen1" component={Screen1} />
    <Stack.Screen name="Screen2" component={Screen2} />
  </Stack.Navigator>
</NavigationContainer>

React-Navigation 增加向后滑动区域

React-Navigation increase swipe back area

gesture

react-native

react-navigation