React Native自定义Android TextView遇propType缺失及自适应高度问题

我来帮你一步步解决这两个问题——先搞定propType报错，再确保文本能自适应高度。

为什么会出现allowFontScaling的propType错误？ #

当你切换到继承BaseViewManager<CustomizedTextView, ReactTextShadowNode>时，ReactTextShadowNode是RN原生文本组件用来处理文本测量、布局的核心类，它自带了一些默认的原生属性（比如allowFontScaling）。RN会期望你的自定义ViewManager能处理这些属性，如果你没有在代码中声明对应的prop处理逻辑，就会抛出这个错误。

第一步：修复propType错误，同时支持自适应高度 #

你需要在CustomizedTextViewManager中添加allowFontScaling以及其他必要文本属性的处理方法，同时确保继承关系和ShadowNode的配置正确。以下是完整的Manager代码示例：

import android.os.Build;
import android.widget.TextView;
import androidx.appcompat.widget.AppCompatTextView;
import com.facebook.react.bridge.ThemedReactContext;
import com.facebook.react.uimanager.BaseViewManager;
import com.facebook.react.uimanager.ReactTextShadowNode;
import com.facebook.react.uimanager.annotations.ReactProp;

public class CustomizedTextViewManager extends BaseViewManager<CustomizedTextView, ReactTextShadowNode> {

    public static final String REACT_CLASS = "CText";

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

    @Override
    public CustomizedTextView createViewInstance(ThemedReactContext context) {
        return new CustomizedTextView(context);
    }

    // 处理allowFontScaling属性，必须添加这个注解方法
    @ReactProp(name = "allowFontScaling", defaultBoolean = true)
    public void setAllowFontScaling(CustomizedTextView view, boolean allowFontScaling) {
        // 如果你需要跟随系统字体缩放逻辑，按下面处理；不需要的话可以自定义逻辑
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            view.setAutoSizeTextTypeWithDefaults(allowFontScaling ? TextView.AUTO_SIZE_TEXT_TYPE_UNIFORM : TextView.AUTO_SIZE_TEXT_TYPE_NONE);
        }
        // 或者直接控制文本缩放比例（可选）
        // float scale = allowFontScaling ? view.getResources().getDisplayMetrics().scaledDensity : view.getResources().getDisplayMetrics().density;
        // view.setTextScaleX(scale);
    }

    // 必须添加text属性的处理
    @ReactProp(name = "text")
    public void setText(CustomizedTextView view, String text) {
        view.setText(text);
    }

    // 可选：添加其他常用文本属性，比如颜色、字号
    @ReactProp(name = "textColor", customType = "Color")
    public void setTextColor(CustomizedTextView view, Integer color) {
        if (color != null) {
            view.setTextColor(color);
        }
    }

    @ReactProp(name = "fontSize", defaultFloat = 14f)
    public void setFontSize(CustomizedTextView view, float fontSize) {
        view.setTextSize(android.util.TypedValue.COMPLEX_UNIT_SP, fontSize);
    }

    @Override
    public ReactTextShadowNode createShadowNodeInstance() {
        return new ReactTextShadowNode();
    }

    @Override
    public Class<ReactTextShadowNode> getShadowNodeClass() {
        return ReactTextShadowNode.class;
    }

    @Override
    public void updateExtraData(CustomizedTextView view, Object extraData) {
        super.updateExtraData(view, extraData);
    }
}

第二步：确保CustomizedTextView支持自适应高度 #

你的自定义TextView需要默认使用wrap_content的布局参数，确保原生层面就能根据内容计算高度：

import android.content.Context;
import android.widget.LinearLayout;
import androidx.appcompat.widget.AppCompatTextView;

public class CustomizedTextView extends AppCompatTextView {

    public CustomizedTextView(Context context) {
        super(context);
        init();
    }

    public CustomizedTextView(Context context, android.util.AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomizedTextView(Context context, android.util.AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        // 默认设置wrap_content的布局参数，确保原生层面自适应高度
        setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
        // 这里可以添加你的自定义逻辑，比如设置字体、默认样式等
    }

    // 可选：如果有特殊测量需求，重写onMeasure
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 比如限制最大高度等自定义逻辑，不需要的话可以省略
    }
}

第三步：RN端使用调整 #

现在你可以移除RN代码中固定的height属性了，只需要设置宽度（比如flex:1或固定宽度），组件会自动根据内容高度自适应：

import React from 'react';
import { StyleSheet, requireNativeComponent } from 'react-native';

const CText = requireNativeComponent('CText');

export default function App() {
  const message = { text: "这里是任意长度的文本内容，现在可以自动适配高度啦" };
  
  return (
    <CText style={styles.message}>{message.text}</CText>
  );
}

const styles = StyleSheet.create({
  message: {
    flex: 1, // 或者设置固定宽度，比如width: 300
    fontSize: 14,
    color: '#333',
    // 不需要设置height！
  }
});

最后别忘了注册ViewManager #

在你的ReactPackage中注册这个自定义ViewManager：

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.Arrays;
import java.util.List;

public class CustomPackage implements ReactPackage {
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.asList(new CustomizedTextViewManager());
    }

    // createNativeModules方法如果不需要可以返回空列表
    @Override
    public List<com.facebook.react.bridge.NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.asList();
    }
}

这样修改后，你的自定义TextView就能像RN原生Text组件一样自适应高度，同时也解决了allowFontScaling的propType报错问题。

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