feat: 添加 onblur 和onfocus方法

Author: duom青源

android/src/main/java/com/variabletextinput/VariableTextInputViewManager.java

@@ -318,7 +318,7 @@ public void setKeyboardType(VariableTextInput view, String keyboardType) {
 
   /**
    * 接受交互通知
-   * 
+   *
    * @return
    */
   @Nullable
@@ -335,7 +335,7 @@ public Map<String, Integer> getCommandsMap() {
 
   /**
    * 根据命令ID，处理对应任务
-   * 
+   *
    * @param root
    * @param commandId
    * @param args
@@ -378,6 +378,10 @@ public Map<String, Object> getConstants() {
         "onAndroidChange",
         MapBuilder.of("registrationName", "onAndroidChange")).put("onAndroidContentSizeChange",
             MapBuilder.of("registrationName", "onAndroidContentSizeChange"))
-        .put("onAndroidTextInput", MapBuilder.of("registrationName", "onAndroidTextInput")).build();
+        .put("onAndroidTextInput", MapBuilder.of("registrationName", "onAndroidTextInput")).put(
+        "onAndroidBlur",
+        MapBuilder.of("registrationName", "onAndroidBlur")).put(
+      "onAndroidFocus",
+      MapBuilder.of("registrationName", "onAndroidFocus")).build();
   }
 }

android/src/main/java/com/variabletextinput/view/VariableTextInput.java

@@ -24,6 +24,7 @@
 import android.view.KeyEvent;
 import android.view.Menu;
 import android.view.MenuItem;
+import android.view.View;
 import android.view.inputmethod.EditorInfo;
 import android.view.inputmethod.InputMethodManager;
 import android.widget.LinearLayout;
@@ -100,6 +101,31 @@ public VariableTextInput(Context context) {
     editText.setBackground(reactViewBackgroundDrawable);
     scrollView.addView(editText);
     this.addView(scrollView);
+    //添加键盘onFocusChangeListener监听器
+    editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
+      @Override
+      public void onFocusChange(View v, boolean hasFocus) {
+        if (hasFocus) {
+          // 当 EditText 获取焦点时执行的操作
+          // 例如：显示键盘
+          WritableMap event = Arguments.createMap();
+          event.putString("text", editText.getText().toString());
+          final Context context = getContext();
+          if (context instanceof ReactContext) {
+            ((ReactContext) context).getJSModule(RCTEventEmitter.class).receiveEvent(getId(), "onAndroidFocus", event);
+          }
+        } else {
+          // 当 EditText 失去焦点时执行的操作
+          // 例如：隐藏键盘
+          WritableMap event = Arguments.createMap();
+          event.putString("text", editText.getText().toString());
+          final Context context = getContext();
+          if (context instanceof ReactContext) {
+            ((ReactContext) context).getJSModule(RCTEventEmitter.class).receiveEvent(getId(), "onAndroidBlur", event);
+          }
+        }
+      }
+    });
     // 添加 TextWatcher 监听器
     editText.addTextChangedListener(new TextWatcher() {
       private int oldHeight = editText.getHeight(); // 保存旧的高度

example/src/App.tsx

@@ -84,6 +84,12 @@ export const App = () => {
             mentions={['@', '#']}
             onMention={onMention}
             keyboardAppearance={'dark'}
+            onBlur={() => {
+              console.log('==onBlur==');
+            }}
+            onFocus={() => {
+              console.log('==onFocus==');
+            }}
           />
           <TouchableOpacity
             activeOpacity={0.85}

ios/VariableTextInput.h

@@ -47,6 +47,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property(nonatomic, copy) RCTBubblingEventBlock onSubmitEditing;
 @property(nonatomic,copy, nullable)RCTDirectEventBlock onTag;
 @property(nonatomic, copy, nullable) RCTDirectEventBlock onTextInput;
+@property(nonatomic, copy, nullable) RCTDirectEventBlock onBlur;
+@property(nonatomic, copy, nullable) RCTDirectEventBlock onFocus;
 @property(nonatomic, strong) NSDictionary *defultTypingAttributes;
 @property(nonatomic, strong) NSArray *tags;
 @property(nonatomic, strong) NSString *keyWord;

ios/VariableTextInput.m

@@ -43,9 +43,18 @@ - (instancetype)initWithFrame:(CGRect)frame textContainer:(NSTextContainer *)tex
     if (self) {
       self.delegate = self;
         [self addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:NULL];
-
+      
       [self preparePlaceholder];
     }
+    
+       //注册通知,监听键盘弹出事件
+    
+       [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardDidShow:) name:UIKeyboardDidShowNotification object:nil];
+            
+       //注册通知,监听键盘消失事件
+            
+    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardDidHidden:) name:UIKeyboardDidHideNotification object:nil];
+
     return self;
 }
 #else
@@ -58,6 +67,15 @@ - (id)initWithFrame:(CGRect)frame
 
       [self preparePlaceholder];
     }
+    
+       //注册通知,监听键盘弹出事件
+    
+       [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardDidShow:) name:UIKeyboardDidShowNotification object:nil];
+            
+       //注册通知,监听键盘消失事件
+            
+    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardDidHidden:) name:UIKeyboardDidHideNotification object:nil];
+      
     return self;
 }
 #endif
@@ -136,7 +154,14 @@ - (void)preparePlaceholder
                   options:NSKeyValueObservingOptionNew context:nil];
     }
 }
-
+-(void)keyboardDidShow: (NSNotification *)notif {
+    //todo
+    _onFocus(@{@"text": [self.textStorage getPlainString]});
+}
+-(void)keyboardDidHidden: (NSNotification *)notif {
+    //todo
+    _onBlur(@{@"text": [self.textStorage getPlainString]});
+}
 - (void)setPlaceholder:(NSString *)placeholderText
 {
     _placeholder = [placeholderText copy];

ios/VariableTextInputViewManager.m

@@ -31,7 +31,8 @@ @implementation VariableTextInputViewManager
 }
 RCT_EXPORT_VIEW_PROPERTY(onTextInput, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onTag, RCTDirectEventBlock)
-
+RCT_EXPORT_VIEW_PROPERTY(onBlur, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onFocus, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onContentSizeChange, RCTBubblingEventBlock)
 RCT_CUSTOM_VIEW_PROPERTY(textAlign, NSTextAlignment, VariableTextInput)

src/VariableTextInputView.tsx

@@ -56,6 +56,10 @@ interface INativeProps {
   onSubmitEditing?: (text: string) => void;
   onAndroidSubmitEditing?: (text: string) => void;
   submitBehavior?: 'submit';
+  onBlur?: () => void;
+  onFocus?: () => void;
+  onAndroidFocus?: () => void;
+  onAndroidBlur?: () => void;
 }
 interface IProps {
   style?: StyleProp<TextStyle> | undefined;
@@ -78,6 +82,8 @@ interface IProps {
   emojiData?: IEmojiData[];
   mentions?: string[]; //'@','#'
   onMention?: (data: IonMentionData) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
 }
 export type IATTextViewRef = React.ForwardedRef<IATTextViewBase>;
 
@@ -245,6 +251,8 @@ const VariableTextInputView = forwardRef(
         {...props}
         onAndroidSubmitEditing={onAndroidSubmitEditing}
         onAndroidTextInput={onAndroidTextInput}
+        onAndroidBlur={props.onBlur}
+        onAndroidFocus={props.onFocus}
         style={style}
       />
     );