Question

我试图在backgroundColor:设置为'transparent'的RNE按钮内达到波纹效果，因为它位于图像的顶部。我正在尝试从Ripple('grey', false)实现TouchableNativeFeedback方法，以达到不同于透明的其他颜色的效果。我在RNE Button文档中读到它接受一个TouchableComponent道具，我认为（希望）我可以调用Ripple()方法并指出要使用的颜色。但是我没有在互联网上找到任何有关如何执行此操作的示例，也无法想象使用该语法应遵循的语法...我希望解决该问题时不让IOS默认可触摸不透明的解决方案在这种情况下，它确实可以正常工作。请检查基于我的文档链接：[https://react-native-elements.github.io/react-native-elements/docs/button.html#touchablecomponent]

我的尝试

<View style={styles.container}>
        <Button
        type={'outline'}
          title="login"
          titleStyle={{color:'white'}}
          containerStyle={{
            flex: 1,
            justifyContent: 'center',
            padding: 8,
          }}
          buttonStyle={{backgroundColor:'transparent', borderColor:'white'}}
          TouchableComponent={TouchableNativeFeedback.Ripple('red', false)}
        />
      </View>`

收到错误消息：

不变违规：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。

版本：expo版本34.0.0，最新的react native元素版本。

感谢您的帮助。

小吃：https://snack.expo.io/@visfort/8cfad7

Answer 1

现在已经快一岁了，但我自己也为此付出了努力，并最终找到了解决方案。

看起来TouchableComponent属性可以接受字符串，函数或组件类。您不能传递组件本身。因此，您将看到它会起作用：

<Button
  TouchableComponent={TouchableNativeFeedback} />

但是，您会看到这引发了异常

<Button
  TouchableComponent={<TouchableNativeFeedback />}

所以现在我们来解决问题。 TouchableComponent确实接受功能。此函数必须返回可以渲染的jsx。创建函数时，props向下传递。这些道具包含.children属性，您可以使用该属性在任何可触摸组件内部渲染子级。因此，您可以执行以下操作，例如，红色波纹效果：

<Button
  TouchableComponent={props => {
    return (
      <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple("red")}>
        {props.children}
      </TouchableNativeFeedback>
    )
  }} />

现在，在我自己的项目中。我创建了一个可以即时创建此函数的辅助函数：

function createTouchableFromColor(color) {
  return props => {
    // Here you can also add additional logic if needed, 
    // eg: you want to use TouchableOpacity for ios
    <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple(color)}>
      {props.children}
    </TouchableNativeFeedback>
  }
}

export { createTouchableFromColor };

通过这种方式，您只需导入函数即可，它变得更加简单：

import { createTouchableFromColor } from "./*the location of the file*"

<Button
  TouchableComponent={createTouchableFromColor("red")} />

如何在本地元素按钮中使用TouchableComponent属性？

1 个答案: