探索React Native底层数字的魅力 - React Native Bottom Sheet

import React from 'react';
import { Text, View } from 'react-native';
import BottomSheet from 'react-native-bottomsheet-reanimated'; // 引入BottomSheet组件
 
const App = () => {
  // 初始化底部弹窗
  const bottomSheetRef = React.useRef();
 
  // 打开底部弹窗
  const openBottomSheet = () => {
    if (bottomSheetRef.current) {
      bottomSheetRef.current.snapTo(1); // 第二个参数1代表打开状态
    }
  };
 
  // 关闭底部弹窗
  const closeBottomSheet = () => {
    if (bottomSheetRef.current) {
      bottomSheetRef.current.snapTo(0); // 第二个参数0代表关闭状态
    }
  };
 
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text onPress={openBottomSheet}>打开底部弹窗</Text>
      <BottomSheet
        ref={bottomSheetRef}
        snapPoints={[0, 300]} // 设置弹窗的高度，0代表关闭，300代表打开
        borderRadius={10}
        renderContent={() => (
          <View style={{ backgroundColor: 'white', height: '100%', borderRadius: 10 }}>
            <Text>这里是弹窗内容</Text>
          </View>
        )}
      />
    </View>
  );
};
 
export default App;

这段代码展示了如何在React Native应用中使用react-native-bottomsheet-reanimated库来创建一个可以打开和关闭的底部弹窗。通过点击文本来触发打开或关闭弹窗的函数，并使用BottomSheet组件来渲染弹窗的内容。这个例子简单易懂，并且展示了如何使用React Hooks来管理组件的状态。