Как создать модальное представление с рулем, используя React Navigation?

Question

Я могу найти модальное представление с рулем в большинстве последних приложений, поэтому я хочу создать нечто подобное, используя react-navigation. Я сделал похожий образ, но взаимодействия совсем другие.

Ожидаемое

Это снимок приложения Twitter для iOS.

Текущее

Этот экран - то, что я сделал до сих пор. Я могу сделать подобный стиль модального с ответом @ yanci-nerio , однако взаимодействия с модальным немного отличаются от того, что я ожидал.

Что я хочу сделать

1. Как сделать так, чтобы модал тянул наверх, и добавить анимацию обратной связи с пружиной?
2. Как сделать прозрачность фоновой карты ожидаемым экраном? Когда модал опускается, непрозрачность фона меняется, как вы можете видеть. Однако, это не полностью изменено, потому что реагирующая навигация все еще измеряет экран на весь экран.

Если вы видите экраны выше, возможно, вы можете увидеть разницу между экранами.

код

Это мой код для экрана.

import React from 'react'
import {
  Easing,
  SafeAreaView,
  View,
  Text,
  Animated,
  Dimensions,
  TouchableOpacity,
} from 'react-native'
import { createStackNavigator } from 'react-navigation'

const DrawerView = ({ children }) => {
  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-end',
      }}
    >
      <SafeAreaView
        style={{
          shadowColor: '#000',
          shadowOffset: {
            width: 0,
            height: 2,
          },
          shadowOpacity: 0.23,
          shadowRadius: 2.62,
          elevation: 4,
          width: '100%',
          backgroundColor: 'white',
          justifyContent: 'center',
          borderTopLeftRadius: 16,
          borderTopRightRadius: 16,
        }}
      >
        <View
          style={{
            paddingTop: 8,
            paddingHorizontal: 30,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <View
            style={{
              backgroundColor: '#dddddd',
              width: 40,
              height: 6,
              borderRadius: 20,
              marginBottom: 17,
            }}
          />
        </View>

        {children}
      </SafeAreaView>
    </View>
  )
}

const MainScreen = ({ navigation }) => {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
      <TouchableOpacity
        onPress={() => {
          navigation.navigate('ConfirmDrawer')
        }}
      >
        <Text>Open Drawer</Text>
      </TouchableOpacity>
    </SafeAreaView>
  )
}

const ConfirmDrawer = ({ navigation }) => {
  return (
    <DrawerView>
      <Text style={{ padding: 40, textAlign: 'center' }}>
        Hey, You just opened a little drawer!
      </Text>
      <View>
        <TouchableOpacity
          onPress={() => {
            navigation.goBack()
          }}
          style={{ backgroundColor: '#dddddd', margin: 10, borderRadius: 20 }}
        >
          <Text style={{ textAlign: 'center', padding: 10 }}>Close</Text>
        </TouchableOpacity>
      </View>
    </DrawerView>
  )
}

export const RootNavigator = createStackNavigator(
  {
    Main: MainScreen,
    ConfirmDrawer: {
      screen: ConfirmDrawer,
      navigationOptions: {
        gesturesEnabled: true,
        gestureResponseDistance: {
          vertical: Dimensions.get('window').height,
        },
      },
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
    transparentCard: true,
    transitionConfig: () => ({
      containerStyle: {
        backgroundColor: 'black',
      },
      screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps
        const thisSceneIndex = scene.index

        const height = layout.initHeight
        const translateY = position.interpolate({
          inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
          outputRange: [height, 0, 0],
        })

        const opacity = position.interpolate({
          inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
          outputRange: [1, 1, 0.5],
        })

        return {
          opacity,
          transform: [{ translateY }],
        }
      },
    }),
  }
)

Спасибо за чтение. Дайте мне знать, если вы хотите узнать проблему более подробно.