feat: 使用bob

README.md

@@ -11,16 +11,22 @@ npm install react-native-draggable-floating
 ## Usage
 
 ```js
-import { multiply } from 'react-native-draggable-floating';
+import DraggableView from 'react-native-draggable-floating';
 
 // ...
 
-const result = await multiply(3, 7);
+<DraggableView>
+  <View />
+</DraggableView>
 ```
 
-## Contributing
+## Props
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+ Prop | Type | Default | Description 
+ --- | --- | --- | ---
+ `stickyLeft` | `boolean` | `false` | Whether to stick to the left side of its parent. 
+`initialOffsetY` | `number` | 0 | The initial offset of the widget from the top of its parent. If negative, the offset will be the bottom. 
 
 ## License
 

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
 };

example/babel.config.js

@@ -17,6 +17,7 @@ module.exports = function (api) {
           },
         },
       ],
+      'react-native-reanimated/plugin',
     ],
   };
 };

example/package.json

@@ -5,22 +5,21 @@
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web"
+    "ios": "expo start --ios"
   },
   "dependencies": {
     "expo": "~48.0.4",
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
     "react-native": "0.71.3",
-    "react-dom": "18.2.0",
-    "react-native-web": "~0.18.10"
+    "react-native-gesture-handler": "^2.9.0",
+    "react-native-reanimated": "^2.14.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "babel-plugin-module-resolver": "^4.1.0",
     "@expo/webpack-config": "^0.17.2",
-    "babel-loader": "^8.1.0"
+    "babel-loader": "^8.1.0",
+    "babel-plugin-module-resolver": "^4.1.0"
   },
   "private": true
-}
+}

example/src/App.tsx

@@ -1,18 +1,41 @@
 import * as React from 'react';
 
-import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from 'react-native-draggable-floating';
+import { StyleSheet, View, Text, Pressable, Switch } from 'react-native';
+import DraggableView from 'react-native-draggable-floating';
 
 export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
-
-  React.useEffect(() => {
-    multiply(3, 7).then(setResult);
-  }, []);
+  const [stickyLeft, setStickyLeft] = React.useState(true);
+  const [negative, setNegative] = React.useState(false);
 
+  const offsetY = 50;
   return (
     <View style={styles.container}>
-      <Text>Result: {result}</Text>
+      <View style={styles.cellContainer}>
+        <Text>props</Text>
+        <Text>value</Text>
+      </View>
+      <View style={styles.cellContainer}>
+        <Text>stickyLeft</Text>
+        <Switch
+          value={stickyLeft}
+          onChange={(e) => setStickyLeft(e.nativeEvent.value)}
+        />
+      </View>
+      <View style={styles.cellContainer}>
+        <Text>offsetY: {negative ? -offsetY : offsetY}</Text>
+        <Switch
+          value={negative}
+          onChange={(e) => setNegative(e.nativeEvent.value)}
+        />
+      </View>
+      <DraggableView
+        stickyLeft={stickyLeft}
+        initialOffsetY={negative ? -offsetY : offsetY}
+      >
+        <Pressable style={styles.floatBtn}>
+          <Text>Debug</Text>
+        </Pressable>
+      </DraggableView>
     </View>
   );
 }
@@ -23,9 +46,22 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  box: {
+  cellContainer: {
+    alignSelf: 'stretch',
+    paddingVertical: 4,
+    marginHorizontal: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderColor: '#998877',
+    borderBottomWidth: 1,
+  },
+  floatBtn: {
     width: 60,
     height: 60,
-    marginVertical: 20,
+    borderRadius: 30,
+    backgroundColor: '#ff4444',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 });