Question

我正在尝试在React-Native中制作一个锥形按钮。像这样：

Sorry I can't display images yet, but one of these sections.

我玩过TouchableOpacity和自定义风格的视图，但看起来这样做的唯一方法是使用透明边框，在按下时仍会注册。

是否可以在React-Native中创建一个具有我正在寻找的形状的按钮以及匹配的碰撞盒？

Answer 1

你可以用这个：

     <View style={{

                width: 0,
                height: 0,
                borderLeftWidth: 55,
                borderLeftColor: 'transparent',
                borderRightWidth: 55,
                borderRightColor: 'transparent',
                borderTopWidth: 100,
                borderTopColor: 'red',
                borderRadius: 55

     }}/>

如果您想要更多形状，可以在这里查看https://codedaily.io/tutorials/22/The-Shapes-of-React-Native

Answer 2

我认为最好的选择是使用SVG，那里有一些同时支持android和iOS的开源库。例如，使用react-native-svg，您可以这样做：

import SVG, {Path} from 'react-native-svg'
// the rest of requirements
// in the render method:
<View style={{flex: 1, alignContent: 'center', justifyContent: 'center'}}>
  <Svg width={60} height={60} viewBox='0 0 15.875 15.875'>
    <Path d='M15.875 0A15.875 15.875 0 0 0 0 15.875h15.968V.005A15.875 15.875 0 0 0 15.875 0z' fill='#ff3333' />
  </Svg>
</View>

您可以使用自己喜欢的触摸组件包裹此形状。

请按照仓库文档中的说明正确安装库。

反应原生的圆锥形按钮

2 个答案: