React Native Android TextInput：onKeyPreIme支持及原生实现问询

要在React Native的Android平台让TextInput组件支持onKeyPreIme事件，核心思路是通过自定义原生EditText组件 + RN桥接通信来实现——毕竟RN原生的TextInput并没有暴露这个事件。下面是完整的分步实现方案，你可以跟着一步步来：

1. 完善原生CustomEditText组件 #

首先把你写的CustomEditText补全，添加回调接口，这样才能把原生的onKeyPreIme事件传递给RN的JS层：

// com/myapp/CustomEditText.java
package com.myapp; // 替换成你的项目包名

import android.content.Context;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.widget.EditText;

public class CustomEditText extends EditText {
    private OnKeyPreImeListener mOnKeyPreImeListener;

    // 定义回调接口，用于传递事件
    public interface OnKeyPreImeListener {
        void onKeyPreIme(int keyCode, KeyEvent event);
    }

    public CustomEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    // 设置回调监听
    public void setOnKeyPreImeListener(OnKeyPreImeListener listener) {
        mOnKeyPreImeListener = listener;
    }

    @Override
    public boolean onKeyPreIme(int keyCode, KeyEvent event) {
        // 如果有监听，就把事件传出去
        if (mOnKeyPreImeListener != null) {
            mOnKeyPreImeListener.onKeyPreIme(keyCode, event);
        }
        // 这里可以根据需求决定是否让系统继续处理该事件：
        // 返回true = 拦截事件，系统不再处理；返回super的结果 = 遵循默认行为
        return super.onKeyPreIme(keyCode, event);
    }
}

2. 创建RN原生视图管理器 #

接下来需要写一个ViewManager，把自定义的EditText注册成RN可以识别的组件，同时负责把原生事件转发到JS层：

// com/myapp/CustomTextInputManager.java
package com.myapp;

import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.events.RCTEventEmitter;

public class CustomTextInputManager extends SimpleViewManager<CustomEditText> {
    // 组件在JS层的名称，要和JS里requireNativeComponent的参数一致
    public static final String REACT_CLASS = "RNCustomTextInput";

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected CustomEditText createViewInstance(ThemedReactContext reactContext) {
        CustomEditText editText = new CustomEditText(reactContext);
        // 设置事件监听，把原生事件发送到JS层
        editText.setOnKeyPreImeListener((keyCode, event) -> {
            WritableMap eventData = Arguments.createMap();
            eventData.putInt("keyCode", keyCode);
            eventData.putInt("action", event.getAction()); // 0=按键按下，1=按键抬起

            // 通过RN的事件发射器把事件传给JS
            reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                    editText.getId(),
                    "topKeyPreIme", // 事件名称，JS层对应onTopKeyPreIme
                    eventData
            );
            return false;
        });
        return editText;
    }

    // 添加TextInput常用的Props，和RN原生TextInput对齐，这里先加两个基础的
    @ReactProp(name = "text")
    public void setText(CustomEditText view, String text) {
        view.setText(text);
    }

    @ReactProp(name = "hint")
    public void setHint(CustomEditText view, String hint) {
        view.setHint(hint);
    }

    // 如果需要更多Props（比如placeholderTextColor、secureTextEntry等），可以继续添加@ReactProp注解的方法
}

3. 注册自定义组件到RN包 #

创建一个ReactPackage类，用来注册我们的自定义ViewManager：

// com/myapp/CustomTextInputPackage.java
package com.myapp;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class CustomTextInputPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList(); // 我们不需要NativeModule，只需要ViewManager
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        List<ViewManager> viewManagers = new ArrayList<>();
        viewManagers.add(new CustomTextInputManager());
        return viewManagers;
    }
}

然后在MainApplication.java里把这个Package添加到RN的包列表中：

// 导入自定义包
import com.myapp.CustomTextInputPackage;

// 在getPackages方法中添加
@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // 添加我们的自定义组件包
    packages.add(new CustomTextInputPackage());
    return packages;
}

4. JS层封装自定义TextInput组件 #

现在在JS层封装原生组件，让它像RN原生TextInput一样好用，并且支持onKeyPreIme回调：

// CustomTextInput.js
import React, { forwardRef } from 'react';
import { requireNativeComponent, ViewProps } from 'react-native';

// 引入原生注册的组件
const RNCustomTextInput = requireNativeComponent('RNCustomTextInput');

// 定义组件Props类型
interface CustomTextInputProps extends ViewProps {
    text?: string;
    hint?: string;
    onKeyPreIme?: (event: { nativeEvent: { keyCode: number; action: number } }) => void;
    // 可以根据需要添加更多Props，比如placeholderTextColor等
}

// 使用forwardRef让父组件可以获取到原生视图的引用
const CustomTextInput = forwardRef((props: CustomTextInputProps, ref) => {
    const { onKeyPreIme, ...rest } = props;

    // 处理原生传来的事件，转发给外部的onKeyPreIme回调
    const handleKeyPreIme = (event) => {
        if (onKeyPreIme) {
            onKeyPreIme(event);
        }
    };

    return (
        <RNCustomTextInput
            {...rest}
            ref={ref}
            // 原生发送的topKeyPreIme事件，对应JS的onTopKeyPreIme属性
            onTopKeyPreIme={handleKeyPreIme}
        />
    );
});

export default CustomTextInput;

5. 使用示例 #

现在你就可以在项目中使用这个自定义的TextInput，监听onKeyPreIme事件了：

// App.js
import React from 'react';
import { View, Alert, StyleSheet } from 'react-native';
import CustomTextInput from './CustomTextInput';

const App = () => {
    const handleKeyPreIme = (event) => {
        const { keyCode, action } = event.nativeEvent;
        // Android返回键的keyCode是4，action=0表示按键按下
        if (keyCode === 4 && action === 0) {
            Alert.alert('onKeyPreIme触发', '返回键被按下，软键盘即将关闭');
        }
    };

    return (
        <View style={styles.container}>
            <CustomTextInput
                hint="请输入内容"
                style={styles.input}
                onKeyPreIme={handleKeyPreIme}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 20,
    },
    input: {
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 4,
        paddingVertical: 10,
        paddingHorizontal: 12,
        fontSize: 16,
    },
});

export default App;

一些注意事项 #

• 如果需要支持更多原生TextInput的属性，比如secureTextEntry、placeholderTextColor等，只需要在CustomTextInputManager中添加对应的@ReactProp注解方法即可。
• 你可以在原生的onKeyPreIme方法中返回true来拦截按键事件，这样系统就不会再处理这个按键（比如返回键不会关闭软键盘）。
• 确保所有原生文件的包名和你的项目包名一致，否则会出现找不到类的错误。

内容的提问来源于stack exchange，提问作者Tron Natthakorn