u

code/allapp/allapp-rn/src/app/(tabs)/_layout.tsx

@@ -3,6 +3,7 @@ import type { NavItem } from '@/store/navigation'
 import { Slot, usePathname, useRouter } from 'expo-router'
 import { useCallback, useEffect, useState } from 'react'
 import { Text, TouchableOpacity, View } from 'react-native'
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller'
 import Animated, { useAnimatedRef } from 'react-native-reanimated'
 import Sortable from 'react-native-sortables'
 import { ADrawer, LucideIcon } from '@/components/common/ao'
@@ -71,7 +72,14 @@ export default function TabsLayout() {
   return (
     <View className="flex-1 bg-gray-100">
       <View className="flex-1 bg-white">
-        <Slot />
+        <KeyboardAvoidingView
+          behavior="padding"
+          style={{
+            flex: 1,
+          }}
+        >
+          <Slot />
+        </KeyboardAvoidingView>
       </View>
 
       <View

code/allapp/allapp-rn/src/app/(tabs)/chat.tsx

@@ -1,64 +1,68 @@
-import { useCallback } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import Sortable from 'react-native-sortables'
-
-const DATA = Array.from({ length: 10 }, (_, index) => `Item ${index + 1}`)
-
-export default function CustomHandleExample() {
-  const renderItem = useCallback(
-    ({ item }: { item: string }) => (
-      <View style={styles.card}>
-        <Text style={styles.text}>{item}</Text>
-        <Sortable.Handle>
-          <View style={styles.handle}>
-            <Text style={styles.handleText}>::</Text>
-          </View>
-        </Sortable.Handle>
-      </View>
-    ),
-    [],
-  )
+import React from 'react'
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller'
 
+export default function KeyboardAvoidingViewExample() {
   return (
-    <View style={styles.container}>
-      <Sortable.Grid
-        activeItemScale={1.05}
-        columns={1}
-        data={DATA}
-        overDrag="vertical"
-        renderItem={renderItem}
-        rowGap={10}
-        highlight-next-line
-        customHandle // must be set to use a custom handle
-      />
-    </View>
+    <KeyboardAvoidingView
+      behavior="padding"
+      keyboardVerticalOffset={100}
+      style={styles.content}
+    >
+      <View style={styles.inner}>
+        <Text style={styles.heading}>Header</Text>
+        <View>
+          <TextInput placeholder="Username" style={styles.textInput} />
+          <TextInput placeholder="Password" style={styles.textInput} />
+        </View>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.text}>Submit</Text>
+        </TouchableOpacity>
+      </View>
+    </KeyboardAvoidingView>
   )
 }
 
 const styles = StyleSheet.create({
-  card: {
-    alignItems: 'center',
-    backgroundColor: '#2e8555',
-    borderRadius: 12,
-    flexDirection: 'row',
-    justifyContent: 'center',
+  content: {
+    flex: 1,
+    maxHeight: 600,
+  },
+  heading: {
+    fontSize: 36,
+    marginBottom: 48,
+    fontWeight: '600',
+  },
+  inner: {
     padding: 24,
+    flex: 1,
+    justifyContent: 'space-between',
   },
-  container: {
-    padding: 16,
+  textInput: {
+    height: 45,
+    borderColor: '#000000',
+    borderWidth: 1,
+    borderRadius: 10,
+    marginBottom: 36,
+    paddingLeft: 10,
   },
-  handle: {
-    backgroundColor: 'rgba(0,0,0,0.2)',
-    borderRadius: 5,
-    padding: 10,
-  },
-  handleText: {
-    color: 'white',
-    fontWeight: 'bold',
+  button: {
+    marginTop: 12,
+    height: 45,
+    borderRadius: 10,
+    backgroundColor: 'rgb(40, 64, 147)',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   text: {
+    fontWeight: '500',
+    fontSize: 16,
     color: 'white',
-    flex: 1,
-    fontWeight: 'bold',
   },
 })

code/allapp/allapp-rn/src/app/_layout.tsx

@@ -4,7 +4,6 @@ import { Stack, usePathname } from 'expo-router'
 import * as SplashScreen from 'expo-splash-screen'
 import { StatusBar } from 'expo-status-bar'
 import { useEffect } from 'react'
-import { Modal, View } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { KeyboardProvider } from 'react-native-keyboard-controller'
 import { MenuProvider } from 'react-native-popup-menu'

code/allapp/allapp-rn/src/app/space/manage/components/SettingActions.tsx

@@ -1,8 +1,10 @@
 import type { UserSpace } from '@/types/space'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Text, View } from 'react-native'
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller'
+import Animated, { useAnimatedStyle } from 'react-native-reanimated'
 import { toast } from 'sonner-native'
-import { LucideIcon } from '@/components/common/ao'
+import { AButton, LucideIcon } from '@/components/common/ao'
 import { AInput, AModal } from '@/components/common/ao/index'
 import {
   Actionsheet,
@@ -14,7 +16,7 @@ import {
   ActionsheetItem,
   ActionsheetItemText,
 } from '@/components/ui/actionsheet'
-import { dissolveSpaceApi } from '@/request/api/space'
+import { dissolveSpaceApi, updateSpaceNameApi } from '@/request/api/space'
 import { useUserStore } from '@/store/user'
 
 interface SettingActionsProps {
@@ -31,20 +33,25 @@ export default function SettingActions(
     isOpen,
     onClose,
     space,
-    onActionSuccess
+    onActionSuccess,
   }: SettingActionsProps,
 ) {
   const userStore = useUserStore()
-
+  const inputRef = useRef<any>(null)
   const [localSpace, setLocalSpace] = useState(space)
 
   const [showNameModal, setShowNameModal] = useState(false)
-
   const [showMemberNameModal, setShowMemberNameModal] = useState(false)
-
   useEffect(() => {
     setLocalSpace(space)
   }, [space])
+
+  useEffect(() => {
+    if (showNameModal) {
+      inputRef.current?.focus()
+    }
+  }, [showNameModal])
+
   return (
     <>
       <Actionsheet
@@ -112,7 +119,7 @@ export default function SettingActions(
               }).then((res) => {
                 if (res.isSuccess) {
                   toast.success('空间已解散')
-                  onActionSuccess?.
+                  onActionSuccess?.()
                 }
               },
               )
@@ -133,47 +140,36 @@ export default function SettingActions(
 
         </ActionsheetContent>
       </Actionsheet>
-
-      <AModal
-        title="修改空间名称"
-        showCloseIcon
-        body={
-          (
-            <View className="gap-2">
-              <Text>空间名称</Text>
-              <AInput
-                value={localSpace?.name || ''}
-                onChangeText={(val) => {
-                  setLocalSpace(prev => prev
-                    ? ({
-                        ...prev,
-                        name: val,
-                      })
-                    : null)
-                }}
-                className="flex-1"
-              />
-            </View>
-          )
-        }
+      <Actionsheet
         isOpen={showNameModal}
-        onCancel={() => {
-          setShowNameModal(false)
-          setLocalSpace(space)
-        }}
         onClose={() => {
           setShowNameModal(false)
-          setLocalSpace(space)
-        }}
-        onConfirm={async () => {
-          // 更新名称
-          if (!localSpace?.name) {
-            toast.warning('请输入空间名称')
-          }
         }}
       >
-      </AModal>
+        <KeyboardAvoidingView
+          behavior="position"
+        >
+          <ActionsheetBackdrop />
 
+          <ActionsheetContent>
+            <ActionsheetDragIndicatorWrapper>
+              <ActionsheetDragIndicator />
+            </ActionsheetDragIndicatorWrapper>
+
+            <View className="pb-6">
+              <View className="items-center mb-6">
+                <Text className="text-lg font-semibold">空间名称</Text>
+              </View>
+
+              <View className="w-full mb-4">
+                <AInput ref={inputRef} className="w-full" placeholder="请输入空间名称" />
+              </View>
+
+              <AButton className="rounded-full">保存</AButton>
+            </View>
+          </ActionsheetContent>
+        </KeyboardAvoidingView>
+      </Actionsheet>
     </>
   )
 }

code/allapp/allapp-rn/src/app/space/manage/index.tsx

@@ -39,6 +39,7 @@ export default function AuthSpace() {
   function listUserSpaces() {
     listUserSpacesApi().then((res) => {
       if (res.isSuccess) {
+        console.log(res.data)
         setSpaces(res.data.spaces)
       }
     })
@@ -55,8 +56,8 @@ export default function AuthSpace() {
         style={{
           height: ITEM_HEIGHT,
         }}
-        className={`rounded-md flex-row items-center justify-between px-4 py-3 border
-                          ${item.space_id === selectedId ? 'border-gray-700' : 'border-gray-300'}`}
+        className={`bg-[#f9f9f9] rounded-md flex-row items-center justify-between px-4 py-3 border
+                          ${item.space_id === selectedId ? 'border-gray-700' : 'border-gray-200'}`}
       >
         <View className="flex-row items-center">
           <Sortable.Handle>
@@ -211,6 +212,9 @@ export default function AuthSpace() {
             : (
                 <Sortable.Grid
                   scrollableRef={scrollableRef}
+                  keyExtractor={(item: UserSpace) => {
+                    return String(item.space_id)
+                  }}
                   activeItemScale={1}
                   columns={1}
                   data={spaces}

code/allapp/allapp-rn/src/app/space/manage/sub-page/settings.tsx

@@ -0,0 +1,13 @@
+import { View } from 'react-native'
+
+import CustomHeader from '@/components/custom/Header'
+
+export default function Settings() {
+  return (
+    <View className="flex-1">
+      <CustomHeader title="空间设置" />
+
+      <View></View>
+    </View>
+  )
+}