如何在使用反应导航从一个屏幕导航到另一屏幕时添加过渡

Question

我正在使用反应导航从一个屏幕导航到另一个屏幕。但是在导航时，我看到导航不够好。因此，我尝试在从一个屏幕导航到另一个屏幕时添加过渡。使用反应导航的任何解决方案

Answer 1

如果您只想使用react-navigation，请使用以下link 您将不得不使用Transitioner

class MyNavView extends Component {
  ...
  render() {
    return (
      <Transitioner
        configureTransition={this._configureTransition}
        navigation={this.props.navigation}
        render={this._render}
        onTransitionStart={this.onTransitionStart}
        onTransitionEnd={this.onTransitionEnd}
      />
    );
}

或

您可以在导航中使用以下第三方库进行过渡 Click Here

import { createStackNavigator } from 'react-navigation';
import { fromLeft } from 'react-navigation-transitions';

const appStack = createStackNavigator(
  {
    ScreenA: {
      screen: ScreenA,
    },
    ScreenB: {
      screen: ScreenB,
    },
  },
  {
    initialRouteName: 'ScreenA',
    transitionConfig: () => fromLeft(),
  },
);