使用react导航库在屏幕之间进行原生延迟过渡

Question

正如标题所述，我正在努力使屏幕之间的反应导航过渡更加平滑。这只会在android上发生，而不会在iOS上发生（至少在iphone X模拟器上）

这是App.js文件上的react-navigation的配置

const SensoriumStackNavigator = createStackNavigator({
  Sensorium: {
    screen: SensoriumScreen,
  },
  Synesthesia: {
    screen: SynesthesiaScreen,
  },
  SynesthesiaItem: {
    screen: SynesthesiaItemScreen,
  },
  MindFulness: {
    screen: MindFulnessScreen,
  },
  BeingAware: {
    screen: BeingAwareScreen,
  },
  Player: {
    screen: PlayerScreen,
    navigationOptions: ({ navigation }) => ({
      headerLeft: null,
      headerRight: <PlayerHeader navigation={navigation} noBanner />,
      headerTransparent: true,
      headerStyle: { height: iPhone5() ? 20 : 40, borderBottomWidth: 1, borderBottomColor: 'transparent' },
    }),
  },
  AudioPlayer: {
    screen: AudioPlayerScreen,
    navigationOptions: ({ navigation }) => ({
      headerLeft: null,
      headerRight: <PlayerHeader audioPlayer navigation={navigation} />,
      headerTransparent: true,
      headerStyle: { height: iPhone5() ? 20 : 40, borderBottomWidth: 1, borderBottomColor: 'transparent' },
    }),
  }
},
  {
    transitionConfig: () => ({
      transitionSpec: {
        duration: 0,
      },
    }),
    defaultNavigationOptions: ({ navigation }) => {
      return {
        headerStyle: { backgroundColor: '#1F1F20', height: iPhone5() ? 30 : 60, borderBottomWidth: 1, borderBottomColor: 'transparent' },
        headerLeft: <MeditateHeader navigation={navigation} />
      }
    }
  });

const UserStackNavigator = createStackNavigator({
  User: {
    screen: UserScreen
  },
  ConfirmUnsubscribe: {
    screen: ConfirmUnsubscribeScreen
  },
  ConfirmMonthlySubscribe: {
    screen: ConfirmMonthlySubscribeScreen
  }
}, {
    defaultNavigationOptions: ({ navigation }) => {
      return {
        headerStyle: { backgroundColor: '#1F1F20', height: 60, borderBottomWidth: 1, borderBottomColor: 'transparent' },
        headerLeft: <MeditateHeader navigation={navigation} />
      }
    }
  });

const PricingStackNavigator = createStackNavigator({
  Pricing: {
    screen: PricingScreen,
    navigationOptions: ({ navigation }) => {
      return {
        headerStyle: { backgroundColor: '#1F1F20', height: 60, borderBottomWidth: 1, borderBottomColor: 'transparent' },
        headerLeft: <MeditateHeader navigation={navigation} />
      }
    }
  },
}, {
    defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: <Icon
          style={{ paddingLeft: 10 }}
          onPress={() => navigation.openDrawer()}
          name="md-menu"
          size={30} />
      }
    }
  });

const ProgressStackNavigator = createStackNavigator({
  Progress: {
    screen: ProgressScreen,
  }
}, {
    defaultNavigationOptions: ({ navigation }) => {
      return {
        headerStyle: { backgroundColor: '#1F1F20', height: 60, borderBottomWidth: 1, borderBottomColor: 'transparent' },
        headerLeft: <MeditateHeader navigation={navigation} />
      }
    }
  });

const SensoriumDrawerNavigator = createDrawerNavigator({
  Sensorium: { screen: SensoriumStackNavigator },
  User: { screen: UserStackNavigator },
  Pricing: { screen: PricingStackNavigator },
  Progress: { screen: ProgressStackNavigator }
}, {
    initialRouteName: 'Sensorium',
    contentComponent: (props) => <SideMenu {...props} />,
    drawerWidth: 300
  });

const AppSwitchNavigator = createSwitchNavigator({
  Sensorium: { screen: SensoriumDrawerNavigator },
  Progress: { screen: ProgressStackNavigator },
  Pricing: { screen: PricingScreen },
  Disclaimer: { screen: DisclaimerScreen }
});

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      viewRef: null
    }
  }

  onViewLoaded() {
    this.setState({ viewRef: findNodeHandle(this.viewRef) });
  }

  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <View
            style={{ height: '100%', width: '100%', flex: 1 }}
            ref={(viewRef) => { this.viewRef = viewRef; }}
            onLayout={() => { this.onViewLoaded(); }} >
            <BottomBar>
              <AppContainer ref={navigatorRef => {
                NavigationService.setTopLevelNavigator(navigatorRef);
              }}
              />
            </BottomBar>

          </View>
          <ModalContainer />
          <BlurBackground viewRef={this.state.viewRef} {...this.props} />
        </PersistGate>
      </Provider>
    )
  }
}
const AppContainer = createAppContainer(AppSwitchNavigator);
export default App;

为防止某些可能的答案，我检查了调试器上的“网络”选项卡，但没有收到多个API请求。这些请求仅发生一次。我还尝试使用发布模式来构建apk，正如在解决方案中在google上提到的那样，但没有任何改进。

也许以某种方式进行了多次重新渲染，但我不知道如何解决。

如果有帮助，我会附上我的package.json

"dependencies": {
    "keymirror": "^0.1.1",
    "lodash.isequal": "^4.5.0",
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-native-blur": "^3.2.2",
    "react-native-fast-image": "^5.2.0",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-linear-gradient": "^2.5.3",
    "react-native-modal": "^7.0.2",
    "react-native-progress-circle": "^2.0.1",
    "react-native-shadow": "^1.2.2",
    "react-native-slider-custom": "git+https://github.com/thodwris/react-native-slider.git",
    "react-native-sound": "^0.10.9",
    "react-native-svg": "^8.0.10",
    "react-native-text-gradient": "0.0.16",
    "react-native-vector-icons": "^6.1.0",
    "react-native-video": "^4.3.1",
    "react-native-youtube": "^1.1.0",
    "react-navigation": "^3.5.1",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.10.0",
    "redux-saga": "^0.16.2",
    "tipsi-stripe": "^7.4.0"
  }

有什么建议吗？

您可以在视频中看到它 https://streamable.com/45qsa

谢谢