feat: 增加react-native-ui-lib，增加添加服务器功能

client/mobile/android/app/proguard-rules.pro

@@ -8,3 +8,6 @@
 #   http://developer.android.com/guide/developing/tools/proguard.html
 
 # Add any project specific keep options here:
+
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }

client/mobile/babel.config.js

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

client/mobile/ios/Podfile.lock

@@ -415,6 +415,37 @@ PODS:
     - React-jsi (= 0.71.2)
     - React-logger (= 0.71.2)
     - React-perflogger (= 0.71.2)
+  - ReactNativeUiLib (3.0.9):
+    - React
+  - RNGestureHandler (2.9.0):
+    - React-Core
+  - RNReanimated (2.14.4):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - glog
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
+    - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SocketRocket (0.6.0)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
@@ -480,6 +511,9 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - ReactNativeUiLib (from `../node_modules/react-native-ui-lib`)
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -569,6 +603,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  ReactNativeUiLib:
+    :path: "../node_modules/react-native-ui-lib"
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -620,6 +660,9 @@ SPEC CHECKSUMS:
   React-RCTVibration: 0af3babdeee1b2d052811a2f86977d1e1c81ebd1
   React-runtimeexecutor: 4bf9a9086d27f74065fce1dddac274aa95216952
   ReactCommon: f697c0ac52e999aa818e43e2b6f277787c735e2d
+  ReactNativeUiLib: 8d3804947431a465a69f09c5e785c988314612a9
+  RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
+  RNReanimated: cc5e3aa479cb9170bcccf8204291a6950a3be128
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 5b0304b3dbef2b52e078052138e23a19c7dacaef
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

client/mobile/package.json

@@ -13,6 +13,9 @@
     "immer": "^9.0.19",
     "react": "18.2.0",
     "react-native": "0.71.2",
+    "react-native-gesture-handler": "^2.9.0",
+    "react-native-reanimated": "^2.14.4",
+    "react-native-ui-lib": "^6.29.1",
     "react-native-webview": "^11.26.1",
     "zustand": "^4.3.2"
   },

client/mobile/src/Entry.tsx

@@ -1,10 +1,14 @@
-import React from 'react';
-import { Alert, ScrollView, StyleSheet } from 'react-native';
+import React, { useState } from 'react';
+import { ScrollView, StyleSheet, TextInput } from 'react-native';
 import { ServerCard } from './components/ServerCard';
 import { useServerStore } from './store/server';
+import Dialog from 'react-native-ui-lib/dialog';
+import { Button, PanningProvider, Text, View } from 'react-native-ui-lib';
 
 export const Entry: React.FC = React.memo(() => {
-  const { serverList, selectServer } = useServerStore();
+  const { serverList, selectServer, addServer } = useServerStore();
+  const [dialogVisible, setDialogVisible] = useState(false);
+  const [serverUrl, setServerUrl] = useState('');
 
   return (
     <ScrollView style={styles.root}>
@@ -20,7 +24,32 @@ export const Entry: React.FC = React.memo(() => {
         );
       })}
 
-      <ServerCard name={'添加服务器'} onPress={() => Alert.alert('暂不支持')} />
+      <ServerCard name={'添加服务器'} onPress={() => setDialogVisible(true)} />
+
+      <Dialog
+        visible={dialogVisible}
+        panDirection={PanningProvider.Directions.DOWN}
+        onDismiss={() => setDialogVisible(false)}
+      >
+        <View backgroundColor="white" style={styles.dialog}>
+          <Text>输入服务器地址:</Text>
+
+          <TextInput
+            style={styles.textInput}
+            inputMode="url"
+            value={serverUrl}
+            onChangeText={setServerUrl}
+          />
+
+          <Button
+            label={'确认'}
+            onPress={() => {
+              addServer(serverUrl);
+              setDialogVisible(false);
+            }}
+          />
+        </View>
+      </Dialog>
     </ScrollView>
   );
 });
@@ -34,4 +63,17 @@ const styles = StyleSheet.create({
   item: {
     marginBottom: 8,
   },
+  dialog: {
+    borderRadius: 8,
+    padding: 10,
+  },
+  textInput: {
+    fontSize: 20,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    marginTop: 4,
+    marginBottom: 10,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
 });