Question

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

Answer 1

您可以使用以下方法增加向后滑动区域：

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

Answer 2

仅是React Navigation 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

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

<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增加滑动后退区域

2 个答案: