React Native Swipeable Panel(可滑动面板)
made with React

React Native Swipeable Panel(可滑动面板)是一个可滑动的、易用的底部面板，可在您的React Native项目中使用。你可以通过滑动手势来打开面板，用拖动手势让它变小或接近、向下滑动。

在面板内，您可以重新布局组件。

安装

Npm

npm install rn-swipeable-panel --save

Yarn

yarn add rn-swipeable-panel

使用

import React from "react";
import { StyleSheet, Text, View } from "react-native";

import SwipeablePanel from "rn-swipeable-panel";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      swipeablePanelActive: false,
    };
  }

  componentDidMount = () => {
    this.openPanel();
  };

  openPanel = () => {
    this.setState({ swipeablePanelActive: true });
  };

  closePanel = () => {
    this.setState({ swipeablePanelActive: false });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <SwipeablePanel
          fullWidth
          isActive={this.state.swipeablePanelActive}
          onClose={this.closePanel}
          onPressCloseButton={this.closePanel}
        >
          <PanelContent /> {/* Your Content Here */}
        </SwipeablePanel>
      </View>
    );
  }
}

示例