react-native - react-Native 上的自定义形状按钮

Question

如何添加自定义形状按钮，例如在 React Native 应用程序上添加五边形按钮。任何帮助或输入将不胜感激。

Answer 1

这是实现它的一种方法(View Snack):

export class PentagonButton extends Component {
  render() {
    return (
        <TouchableOpacity onPress={() => { }}>
          <View style={styles.pentagon}>
            <View style={styles.pentagonInner} />
            <View style={styles.pentagonBefore} />
          </View>
        </TouchableOpacity>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  pentagon: {
    backgroundColor: 'transparent'
  },
  pentagonInner: {
    width: 90,
    borderBottomColor: 'red',
    borderBottomWidth: 0,
    borderLeftColor: 'transparent',
    borderLeftWidth: 18,
    borderRightColor: 'transparent',
    borderRightWidth: 18,
    borderTopColor: 'red',
    borderTopWidth: 50
  },
  pentagonBefore: {
    position: 'absolute',
    height: 0,
    width: 0,
    top: -35,
    left: 0,
    borderStyle: 'solid',
    borderBottomColor: 'red',
    borderBottomWidth: 35,
    borderLeftColor: 'transparent',
    borderLeftWidth: 45,
    borderRightColor: 'transparent',
    borderRightWidth: 45,
    borderTopWidth: 0,
    borderTopColor: 'transparent',
  }
});

此示例使用不同形状的 View 来构建您的按钮。感谢@browniefed谁做了lot of different shapes here.

另一种解决方法是使用 React ART，这是在 React Native 中创建形状的好方法。 Here are the unofficial docs.