探索优雅的底部操作表组件：React Native Bottom Action Sheet

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import BottomActionSheet from '@twotalltotems/react-native-bottom-action-sheet'; // 引入组件
 
const App = () => {
  const [visible, setVisible] = useState(false); // 使用状态变量来控制底部操作表的显示和隐藏
 
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="打开底部操作表" onPress={() => setVisible(true)} />
      <BottomActionSheet
        visible={visible} // 根据visible状态决定是否显示底部操作表
        onCancel={() => setVisible(false)} // 当点击取消按钮或者背景区域时，关闭底部操作表
        buttonTextStyle={{ color: 'blue' }} // 定制按钮文本样式
        title="请选择一项操作" // 定义操作表标题
        onAnimationEnd={() => console.log('动画结束')} // 动画结束时的回调
      >
        <View>
          <Text style={{ padding: 10 }} onPress={() => setVisible(false)}>选项 1</Text>
          <Text style={{ padding: 10 }} onPress={() => setVisible(false)}>选项 2</Text>
          <Text style={{ padding: 10 }} onPress={() => setVisible(false)}>选项 3</Text>
        </View>
      </BottomActionSheet>
    </View>
  );
};
 
export default App;

这个代码示例展示了如何在React Native应用中使用BottomActionSheet组件来创建一个优雅的底部操作表。它使用了React Hooks来管理组件状态，并通过一个按钮来触发操作表的显示和隐藏。用户可以点击操作项来执行动作并关闭操作表。这个示例简洁明了，并且教会了如何使用该组件。