React Native：尝试使用手势处理使文本组件可拖动时出现渲染错误

Question

我正在 React Native 应用程序中开发照片编辑功能，用户可以在其中添加可拖动的文本叠加层。 我使用挂钩来管理文本块位置并通过手势处理更新它们。 但是，当我尝试在手势（例如拖动）期间更新这些文本元素的位置时， 我遇到渲染错误：“与之前的渲染相比，渲染了更多的钩子。

我怀疑这个问题可能与钩子或手势处理程序的实现方式有关。如何正确更新文本块的位置而不遇到此渲染错误？

 {textBlocks.map((block, index) => (
                      <Text
                        onLayout={(event) => {
                          const { width, height } = event.nativeEvent.layout;
                          setTextSize({ width, height });
                        }}
                        key={index}
                        style={[styles.addedTextStyle, { left: block.x, top: block.y, color: block.color, fontSize: fontSize, }]}>
                        {block.text}
                      </Text>
                    ))}

1. rn-可拖动
2. rn 拖动文本编辑器
3. 链复活+动画视图
4. rn-gesture-handler（为每个文本添加监听器）

我尝试使文本添加到屏幕后可拖动的方法。 它们中的每一个都会导致错误。

Answer 1

您能具体分享一下它不起作用的原因吗？我尝试让我的文本可拖动，效果很好。我尝试使用 rn-draggable ，它很容易工作。 您可以分享您的代码以获取更多上下文吗？