使用 React Native 进行基于标签的过滤

Question

这是我的问题。

当我按下 2 个按钮

时，我希望这两个按钮的值变成 2 个"标签"，用于使用 React Native 从 mysql 数据库中过滤和获取我的数据。我应该使用<Button>、<TouchableOpacity>、<TouchableHighlight>或任何其他来使其工作吗？

我将如何实现这一点？我需要一个示例代码。谢谢！

Answer 1

所有

三个组件（Button、TouchableOpacity、TouchableHighlight）都可以用于此目的。它们都具有onPress属性，该属性在用户按交互时触发函数。使用哪一个主要是您对设计和实现的偏好。

例

_onPress = (value) => {
  console.log(value); // Do something with the value
}
render() {
  return (
    <View>
      <Button onPress={() => this._onPress('Some Button Value')} title="Press Me!" />
      <TouchableOpacity onPress={() => this._onPress('Some TouchableOpacity Value')}>
        <Text>{'Press Me!'}</Text>
      </TouchableOpacity>
      <TouchableHighlight onPress={() => this._onPress('Some TouchableHighlight Value')}>
        <Text>{'Press Me!'}</Text>
      </TouchableHighlight>    
    </View>
  )
}

Answer 2

所有这些都

可以工作，但建议使用 <Pressable> 。虽然，按钮是一个非常糟糕的主意，因为它太基础了，几乎没有定制级别。

来自 react-native 文档：

如果您正在寻找一种更广泛且面向未来的处理方式基于触摸的输入，请查看可按 API。

https://reactnative.dev/docs/pressable

你可以像这样使用Pressable：

<Pressable onPress={onPressFunction}>
<Text>I'm pressable!</Text>
</Pressable>