android React native -在屏幕上向上滑动时从底部向上拖动模态

zwghvu4y 于 2023-03-16 发布在 Android

关注(0)|答案(2)|浏览(146)

一个人如何慢慢地拖动一个模态向上时，在屏幕上向上滑动，拖动它完全向上，如果快速向上滑动和关闭时，向下滑动。
这就像下面显示的视频中Snapchat的工作原理一样。

我试过react-native-swipe-modal-up-down和react-native-modalize，但它们都不支持在完全隐藏时缓慢显示。

android

来源：https://stackoverflow.com/questions/71410373/react-native-drag-up-modal-from-bottom-while-swiping-up-on-the-screen

2条答案

按热度按时间

vhipe2zx1#

您有几个解决方案，我见过的最好的实现之一是this
另外，我建议你在YouTube上看这个，它构建了类似的东西。检查this
对于实现，我建议使用其中之一，因为它们使用react-native-gesture-handler和reanimated，并且它们在UI线程中运行，这要快得多，并且不会阻塞javascript线程。
希望能有所帮助，如果你有任何问题请问。
编辑

答案

这里我写了一个示例代码。这可以很容易地实现一个滚动视图，我会做它与react-native-reanimated所以如果你想要更多的动画，你可以编辑和扩展它。该youtube视频了有另一个视频，他实现了类似的东西。
我不会实现完全导航，只是举个例子，这样您就知道如何实现了

我假设您想要全屏导航

创建您的屏幕（我将创建一个屏幕我们两次，例如，我会称之为一个页面）

//page.js
import React from 'react';
import { Dimensions, View, StyleSheet, Text } from 'react-native';
import Constants from 'expo-constants';
interface PageProps {
  index: number;
  title: string;
}

const Page: React.FC<PageProps> = ({ index, title }) => {
  return (
    <View style={[styles.container, { backgroundColor: `rgba(0,0,50, 0.${index + 2})` }]}>
      <Text style={styles.text}>{title}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: Dimensions.get('screen').height - Constants.statusBarHeight, // this is important if you want full screen navigation
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 60,
    color: 'white',
    textTransform: 'uppercase',
    fontWeight: '700',
  },
});

export { Page };

// Than on another place use an animated scroll

import { StyleSheet } from 'react-native';
import Animated from 'react-native-reanimated';
import { Page } from './map/Page';

const TestScreen = (): JSX.Element => {
  return (
    <Animated.ScrollView pagingEnabled style={styles.container}>
{/* so here are your screens, for example first camera second images */}
      <Page title={'PAGE 1 '} index={0} />
      <Page title={'PAGE 2'} index={1} />
    </Animated.ScrollView>
  );
};

export default TestScreen;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

下面是一个小gif，显示了实现。