优化设置界面的输入框输入机制

index.js

@@ -21,7 +21,7 @@ import { showLyric, onPositionChange } from '@/utils/lyricDesktop'
 import { init as initI18n, supportedLngs } from '@/plugins/i18n'
 import { deviceLanguage, getPlayInfo, toast } from '@/utils/tools'
 import { LIST_ID_PLAY_TEMP } from '@/config/constant'
-import { connect } from '@/plugins/sync'
+import { connect, SYNC_CODE } from '@/plugins/sync'
 
 console.log('starting app...')
 
@@ -43,7 +43,13 @@ const init = () => {
   ]).then(() => {
     let setting = store.getState().common.setting
     toggleTranslation(setting.player.isShowTranslation)
-    if (setting.sync.enable) connect()
+    if (setting.sync.enable) {
+      connect().catch(err => {
+        if (err.message == SYNC_CODE.unknownServiceAddress) {
+          store.dispatch(commonAction.setIsEnableSync(false))
+        }
+      })
+    }
     if (setting.desktopLyric.enable) {
       showLyric(
         setting.desktopLyric.isLock,

publish/changeLog.md

@@ -1,3 +1,7 @@
+### 优化
+
+- 优化设置界面的输入框输入机制，现在只要键盘收起即可自动保存输入的内容
+
 ### 变更
 
 - 不再自动聚焦定时退出、调整位置弹窗内的输入框，这应该可以修复某些设备无法在这两个地方弹出键盘的问题

src/plugins/sync/client/config.js

@@ -7,4 +7,5 @@ export const SYNC_CODE = {
   getServiceIdFailed: 'Get service id failed',
   connectServiceFailed: 'Connect service failed',
   connecting: 'Connecting...',
+  unknownServiceAddress: 'Unknown service address',
 }

src/plugins/sync/client/index.js

@@ -7,7 +7,8 @@ import { SYNC_CODE } from './config'
 
 const handleConnect = async authCode => {
   const hostInfo = await getSyncHost()
-  if (!hostInfo || !hostInfo.host || !hostInfo.port) throw new Error('Unknown service address')
+  // console.log(hostInfo)
+  if (!hostInfo || !hostInfo.host || !hostInfo.port) throw new Error(SYNC_CODE.unknownServiceAddress)
   await disconnect(false)
   const keyInfo = await handleAuth(hostInfo.host, hostInfo.port, authCode)
   await socketConnect(hostInfo.host, hostInfo.port, keyInfo)
@@ -34,6 +35,7 @@ const connect = authCode => {
       status: false,
       message: err.message,
     }))
+    return Promise.reject(err)
   })
 }
 

src/screens/Home/Setting/Sync/IsEnable.js

@@ -121,11 +121,13 @@ export default memo(() => {
 
 
   const setHost = useCallback(host => {
+    if (host == hostInfo.host) return
     const newHostInfo = { ...hostInfo, host }
     setSyncHost(newHostInfo)
     setHostInfo(newHostInfo)
   }, [hostInfo])
   const setPort = useCallback(port => {
+    if (port == hostInfo.host) return
     const newHostInfo = { ...hostInfo, port }
     setSyncHost(newHostInfo)
     setHostInfo(newHostInfo)

src/screens/Home/Setting/components/InputItem.js

@@ -1,33 +1,63 @@
 import React, { memo, useState, useCallback, useEffect, useRef } from 'react'
 
-import { StyleSheet, View, Text } from 'react-native'
+import { StyleSheet, View, Text, Keyboard } from 'react-native'
 import { useGetter } from '@/store'
 import Input from '@/components/common/Input'
 
-
 export default memo(({ value, label, onChange, ...props }) => {
   const [text, setText] = useState(value)
+  const textRef = useRef(value)
   const isMountRef = useRef(false)
+  const inputRef = useRef()
   const theme = useGetter('common', 'theme')
   const saveValue = useCallback(() => {
     onChange && onChange(text, value => {
       if (!isMountRef.current) return
-      setText(String(value))
+      const newValue = String(value)
+      setText(newValue)
+      textRef.current = newValue
     })
   }, [onChange, text])
   useEffect(() => {
     isMountRef.current = true
-    return () => isMountRef.current = false
+    return () => {
+      isMountRef.current = false
+    }
   }, [])
   useEffect(() => {
-    if (value != text) setText(String(value))
+    const handleKeyboardDidHide = () => {
+      if (!inputRef.current.isFocused()) return
+      onChange && onChange(textRef.current, value => {
+        if (!isMountRef.current) return
+        const newValue = String(value)
+        setText(newValue)
+        textRef.current = newValue
+      })
+    }
+    const keyboardDidHide = Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide)
+
+    return () => {
+      keyboardDidHide.remove()
+    }
+  }, [onChange])
+  useEffect(() => {
+    if (value != text) {
+      const newValue = String(value)
+      setText(newValue)
+      textRef.current = newValue
+    }
   }, [value])
+  const handleSetSelectMode = useCallback(text => {
+    setText(text)
+    textRef.current = text
+  }, [])
   return (
     <View style={styles.container}>
       <Text style={{ ...styles.label, color: theme.normal }}>{label}</Text>
       <Input
         value={text}
-        onChangeText={setText}
+        ref={inputRef}
+        onChangeText={handleSetSelectMode}
         style={{ ...styles.input, backgroundColor: theme.secondary40 }}
         {...props}
         onBlur={saveValue}