如何使用react-native的TouchableNativeFeedback在android中创建一个圆形按钮？

Question

使用TouchableHighlight，我可以使用width，height和borderRadius样式属性轻松制作圆形按钮。

但是，borderRadius似乎对TouchableNativeFeedback

没有任何影响

我尝试在TouchableNativeFeedback和borderRadius的视图中包装overflow: 'hidden'元素，但无济于事。

很高兴在这里得到一些帮助。感谢。

Answer 1

您只需在borderRadius周围的父<View>上设置<TouchableNativeFeedback>，并在背景道具中使用TouchableNativeFeedback.Ripple('your_color', true)方法（注意，无边框arg。设置为true）。

正如 reyeser here在react-native github问题中所描述的那样。

Answer 2

根据您的说明，TouchableNativeFeedback似乎不支持borderRadius。

您可以尝试调整TouchableNativeFeedback的代码并发送拉取请求或实现新视图（Android圆形按钮）并将其发布到npm。请参阅docs on writing views。

您还可以查找满足您需求的现有组件：https://js.coach。正在搜索＆＃39;按钮＆＃39;给了我一些结果。

Answer 3

布拉德·亚当斯答案的可复制示例：

<View style={{ borderRadius: 15, overflow: 'hidden' }}>
  <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('#000000', true)}>
</View>

编辑：由于某种原因，有人认为我在复制答案，但我只是想提供一个清晰的工作示例