javascript - transitionConfig 在 native react 中不起作用

Question

我正在研究 React Native，我遇到了一个问题

    import React, { Component } from 'react'
import {createAppContainer, createSwitchNavigator } from 'react-navigation';
import {createDrawerNavigator} from 'react-navigation-drawer'
import {createStackNavigator} from 'react-navigation-stack';
import SignUpForm from './components/AuthScreens/SignUpForm'
import OwnSwipeable from './components/OwnSwipeable';
import SignIn from './components/AuthScreens/SignIn';
import * as firebase from 'firebase'
import LoadingScreen from './components/Screens/LoadingScreen';
import AdminHome from './components/AdminHome'
import { Easing } from 'react-native';
import { fromLeft } from "react-navigation-transition-config";
// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "AIzaSyDWlxi-Q3KQV8KVeF4QT51AAMdqhkp4utg",
    authDomain: "hr-installments.firebaseapp.com",
    databaseURL: "https://hr-installments.firebaseio.com",
    projectId: "hr-installments",
    storageBucket: "hr-installments.appspot.com",
    messagingSenderId: "827714438348",
    appId: "1:827714438348:web:242b74c707649b7d74ee69"
  };
  // Initialize Firebase
firebase.initializeApp(firebaseConfig);

// transition of sliding screens
let SlideFromRight = (index, position, width) => {
  const inputRange = [index - 1, index, index + 1];
  const translateX = position.interpolate({
    inputRange: [index - 1, index, index + 1],
    outputRange: [width, 0, 0]
  })
  const slideFromRight = { transform: [{ translateX }] }
  return slideFromRight
};
let CollapseExpand = (index, position) => {
  const inputRange = [index - 1, index, index + 1];
  const opacity = position.interpolate({
    inputRange,
    outputRange: [0, 1, 1],
  });

  const scaleY = position.interpolate({
    inputRange,
    outputRange: ([0, 1, 1]),
  });

  return {
    opacity,
    transform: [
      { scaleY }
    ]
  };
};
const TransitionConfiguration = () => {
  return {
    transitionSpec: {
      duration: 750,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
      useNativeDriver: true,
    },
    screenInterpolator: (sceneProps) => {
      const { layout, position, scene } = sceneProps;
      const width = layout.initWidth;
      const { index, route } = scene
      const params = route.params || {}; // <- That's new
      const transition = params.transition || 'default'; // <- That's new
      return {
        collapseExpand: CollapseExpand(index, position),
        default: SlideFromRight(index, position, width),
      }[transition];
    },
  }
}


const MainNavigator = createDrawerNavigator({
  Home: {
    name: 'Home',
    screen: OwnSwipeable,
  },
});
// auth screen
const AuthStack = createStackNavigator({
  SignIn: SignIn,
  SignUpForm: SignUpForm
});
// screen for admin
const Admin = createDrawerNavigator({
  Home : {
    name : 'Admin',
    screen: AdminHome
  }
});
// main app
const App = createAppContainer(
  createSwitchNavigator(
    {
      Loading: LoadingScreen,
      App: MainNavigator,
      Auth: AuthStack,
      Admin: Admin
    },
    {
      initialRouteName: 'Loading',
      transitionConfig: () => fromLeft(),
    }
  )
);

export default App;

我正在使用

react-navigation-transition

内置组件但没有转换工作，我已经使用了

transitionConfig : TransitionConfigurtaion

TransitionConfigurtaion 是一个定义的函数...但这也不起作用，我几乎尝试了所有方法来实现屏幕转换，但没有任何帮助。请看看是否有人知道这个问题。

Answer 1

我使用过react-navigation-stack 及其与navigation 4.X 的配合:

  import { createStackNavigator,TransitionPresets } from 'react-navigation-stack';

        const AppStack = createStackNavigator(
          {
            HomeScreen: {
              screen: Home,
            },
            AirportMeeting: {
              screen: AirportMeeting,
            },
            
          },
          {
            
            initialRouteName: 'HomeCard',
           defaultNavigationOptions: {
      ...TransitionPresets.SlideFromRightIOS,
    },
          },
        );

在导航 5.x 中

import {
    createStackNavigator,
    TransitionPresets,
} from '@react-navigation/stack'

 <NavigationContainer>
                <Stack.Navigator
                    screenOptions={({ route, navigation }) => ({
                        ...TransitionPresets.SlideFromRightIOS,
                    })}
                >
                    <Stack.Screen
                        name="SplashScreen"
                        component={SplashScreen}
                    />
                    <Stack.Screen name="SignUp" component={SignUp} />
                    <Stack.Screen name="Otp" component={Otp} />
                </Stack.Navigator>
            </NavigationContainer>