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

时间:2016-03-16 16:04:40

标签: android react-native

使用TouchableHighlight,我可以使用widthheightborderRadius样式属性轻松制作圆形按钮。

但是,borderRadius似乎对TouchableNativeFeedback

没有任何影响

我尝试在TouchableNativeFeedbackborderRadius的视图中包装overflow: 'hidden'元素,但无济于事。

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

3 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:0)

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

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

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