文本字符串必须在文本组件中呈现

问题描述

我知道这个问题已经被问过很多次了，我已经提到了这些问题，但我的用例几乎没有什么不同。我需要允许用户在 imagebackground 上绘图，所以我为它创建了自己的原生视图。我在 ios 上没有遇到这个问题。它只出现在 android 中。我的代码中没有注释，这是应用程序出现问题的主要原因。由于这适用于 ios 而不是 android，所以我认为问题可能来自本机方面，但我仍然无法弄清楚它是什么

这是我的原生 android 代码

import com.facebook.react.uimanager.SimpleViewManager
import com.facebook.react.uimanager.ThemedReactContext

class CanvasManager: SimpleViewManager<CanvasView>() {
    override fun createViewInstance(reactContext: ThemedReactContext): CanvasView {
        return  CanvasView(reactContext)
    }

    override fun getName(): String {
        return "Canvas"
    }

}



class CanvasPackage: ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
        return emptyList()
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*,*>> {
        return listof(
                CanvasManager()
        )
    }

}


import android.content.Context
import android.graphics.*
import android.view.MotionEvent
import android.view.View
import android.view.ViewConfiguration
import androidx.core.content.res.ResourcesCompat
import kotlin.math.abs

private const val stroke_WIDTH = 12f

class CanvasView(context: Context) : View(context) {

    private var path = Path()

    private val drawColor = ResourcesCompat.getColor(resources,R.color.colorPaint,null)
    private val backgroundColor = ResourcesCompat.getColor(resources,android.R.color.transparent,null)
    private lateinit var extraCanvas: Canvas
    private lateinit var extraBitmap: Bitmap
    private lateinit var frame: Rect

    private val paint = Paint().apply {
        color = drawColor
        isAntiAlias = true
        isDither = true
        style = Paint.Style.stroke 
        strokeJoin = Paint.Join.ROUND 
        strokeCap = Paint.Cap.ROUND 
        strokeWidth = stroke_WIDTH 
    }

   
    private val touchTolerance = ViewConfiguration.get(context).scaledTouchSlop

    private var currentX = 0f
    private var currentY = 0f

    private var motionTouchEventX = 0f
    private var motionTouchEventY = 0f


    override fun onSizeChanged(width: Int,height: Int,oldWidth: Int,oldHeight: Int) {
        super.onSizeChanged(width,height,oldWidth,oldHeight)

        if (::extraBitmap.isInitialized) extraBitmap.recycle()
        val spec = MeasureSpec.makeMeasureSpec(0,MeasureSpec.UNSPECIFIED)

        rootView.measure(spec,spec);
        rootView.layout(0,rootView.measuredWidth,rootView.measuredHeight);
        extraBitmap = Bitmap.createBitmap(rootView.width,rootView.height,Bitmap.Config.ARGB_8888)
        extraCanvas = Canvas(extraBitmap)
        extraCanvas.drawColor(backgroundColor)

        frame = Rect(0,width,height )
    }



    override fun onDraw(canvas: Canvas) {
        canvas.drawBitmap(extraBitmap,0f,null)
        extraCanvas.drawRect(frame,paint)
    }


    override fun onTouchEvent(event: MotionEvent): Boolean {
        motionTouchEventX = event.x
        motionTouchEventY = event.y

        when (event.action) {
            MotionEvent.ACTION_DOWN -> touchStart()
            MotionEvent.ACTION_MOVE -> touchMove()
            MotionEvent.ACTION_UP -> touchUp()
        }
        return true
    }

    private fun touchStart() {
        path.reset()
        path.moveto(motionTouchEventX,motionTouchEventY)
        currentX = motionTouchEventX
        currentY = motionTouchEventY
    }

    private fun touchMove() {
        val dx = abs(motionTouchEventX - currentX)
        val dy = abs(motionTouchEventY - currentY)
        if (dx >= touchTolerance || dy >= touchTolerance) {
            path.quadTo(currentX,currentY,(motionTouchEventX + currentX) / 2,(motionTouchEventY + currentY) / 2)
            currentX = motionTouchEventX
            currentY = motionTouchEventY
            extraCanvas.drawPath(path,paint)
        }
        invalidate()
    }

    private fun touchUp() {
        path.reset()
    }
}

以下是我的本机代码

const ChatimageEditingScreen = ({ navigation,route }) => {
return (
    <>
      <SafeAreaView style={styles.containerStyle}>
        <ViewShot ref={imageRef}>
          <imagebackground
            source={{
              uri: image,}}
            style={styles.imagebackgroundStyle}
          >
            <ChatimageEditingCenterText
              text={text}
              color={color}
              editText={editText}
            />
            <ChatimageEditingCanvas showCanvas={showCanvas} />
          </imagebackground>
        </ViewShot>
      </SafeAreaView>
//Some other components......
})

import React from "react";
import { requireNativeComponent,StyleSheet,Text } from "react-native";
const Canvas = requireNativeComponent("Canvas");

const ChatimageEditingCanvas = ({ showCanvas }) => {
  return (
    <Canvas
      style={{
        ...styles.canvasstyle,height: showCanvas ? null : 0,}}
    />
  );
};

const styles = StyleSheet.create({
  canvasstyle: {
    flex: 1,alignItems: "center",justifyContent: "center",position: "absolute",top: 100,bottom: 100,left: 0,right: 0,backgroundColor: "transparent",},});

export default ChatimageEditingCanvas;

对于我的原生 ios 代码，我指的是对我有用的 https://youtu.be/E2NTCmEsdSE。不确定 android

上的问题是什么

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）