React Native - 在可按下的长按上连续删除文本输入

Question

当我尝试使用 Pressable 执行 onLongPress 时，我有点担心。与之关联的函数只被调用一次。

如何让它在按住 pressable 的时候不断删除 textInput 上的值？

示例代码：

<Pressable
              style={({ pressed }) => [
                styles.deleteStyle,
                {
                  opacity: pressed
                    ? 0.5
                    : 1,
                }]}
              onPress={() => { delDigit() }}
              onLongPress={() => { delDigit() }}
            >
              <Icon style={[{ color: '#FD6B89' }]} name="backspace" size={30} />
            </Pressable>

提前致谢！

Answer 1

一个非常简单的解决方案是在按住 Pressable 按钮时调用 onLongPress 函数时使用 setInterval 函数。您可以使用 clearInterval 来停止从您的 textInput 中删除文本。

步骤：

a) 在调用 onLongPress 函数时调用 Pressable 上的 setInterval 函数，并在每个间隔中从 textInput 中删除您的值字符串的最后一个元素。

onLongPress={() => {
   this.timer = setInterval(() => {
      this.setState({
          email: this.state.email.substring(0,this.state.email.length - 1)
      })
   },200)
}}

b) 在调用onPressOut函数时调用Pressable上的clearInterval函数清除onLongPress

中声明的timerInterval

    onPressOut={() => {
      clearInterval(this.timer)
    }}

这是针对您的问题的完整工作 solution/example： https://snack.expo.dev/@gavindmello97/pressable-deletion

希望对您有所帮助。如果是，请 将我的答案标记为正确答案 以便其他人也能从中受益。如果您在使用我的代码时遇到任何问题，请给我留言/评论。很高兴为您效劳。

React Native - 在可按下的长按上连续删除文本输入

React Native - Continuous textinput delete on Pressable longpress

long-press

react-native

pressable