React-Navigation 增加向后滑动区域

Posted 2023-03-15

【中文标题】React-Navigation 增加向后滑动区域

【英文标题】：React-Navigation increase swipe back area

【发布时间】：2018-07-28 14:46:06

【问题描述】：

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

【参考方案1】：

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

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

【参考方案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>