如何解决文本字符串必须在文本组件中呈现
我知道这个问题已经被问过很多次了,我已经提到了这些问题,但我的用例几乎没有什么不同。我需要允许用户在 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 举报,一经查实,本站将立刻删除。