Question

在大多数最新的应用程序中，都可以使用车把找到模态视图，因此我想使用react-navigation创建类似的视图。我做了类似的外观，但是交互方式却大不相同。

期望

这是Twitter iOS应用程序的快照。

当前

此屏幕是我到目前为止所做的。我可以使用@yanci-nerio's answer制作类似的模式，但是与模式的交互与我预期的有所不同。

我想做什么

如何使模态达到最高点，并给出一些类似弹簧的反馈动画？
如何使背景卡的不透明性成为预期的屏幕？当模态下拉时，背景不透明度就会改变，如您所见。但是，它还没有完全更改，因为反应导航仍然可以测量整个屏幕。

如果您看到上面的屏幕，则可能可以得到两个屏幕之间的区别。

代码

这些是我在屏幕上的代码。

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 }],
        }
      },
    }),
  }
)

感谢您的阅读。如果您想更详细地了解问题，请告诉我。

如何使用React Navigation使用车把创建模态视图？

0 个答案: