适用于 Android 的 React-navigation 堆栈水平屏幕手势。 （反应导航/堆栈）

Question

在 Android 上，我知道当使用 react-navigation-stack 库和 transitionConfig 属性时，可以将堆栈屏幕动画控制为水平。但是，它似乎不适用于 react-navigation/stack 库，或者说它没有任何支持。有没有人设法使它与react-navigation/stack 一起工作？或者有什么方法可以将这两个库结合起来，因为我发现仅仅为了这个小问题而在另一个库中重写我的代码是一种浪费。任何帮助将不胜感激！

Answer 1

像这样使用它-

Working Example

Youtube Tutorial for Navigation Gestures

import * as React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { Easing } from 'react-native';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Notifications"
        onPress={() => navigation.navigate('Notifications')}
      />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createStackNavigator();

const timingConfig = {
  animation: 'timing',
  config: {
    duration: 200,
    easing: Easing.linear,
  },
};

const options = {
  gestureEnabled: true,
  cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
  transitionSpec: {
    open: timingConfig,
    close: timingConfig,
  },
};

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} options={options} />
      <Stack.Screen
        name="Notifications"
        component={NotificationsScreen}
        options={options}
      />
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        options={options}
      />
      <Stack.Screen
        name="Settings"
        component={SettingsScreen}
        options={options}
      />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}