如何在React Native中创建单侧倾斜的自定义按钮组件

实现思路 #

利用React Native的transform样式中的skewX属性，给按钮容器添加单侧倾斜效果，同时对内部文本做反向倾斜，确保文字保持水平不扭曲。

左侧倾斜按钮组件 #

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const LeftSkewedButton = ({ title, onPress, buttonStyle, textStyle }) => {
  return (
    <TouchableOpacity 
      style={[styles.leftSkewContainer, buttonStyle]} 
      onPress={onPress}
    >
      <Text style={[styles.skewText, textStyle]}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  leftSkewContainer: {
    backgroundColor: '#2563eb',
    paddingVertical: 12,
    paddingHorizontal: 24,
    paddingLeft: 32, // 左侧倾斜后补间距，避免内容贴边
    transform: [{ skewX: '-15deg' }],
  },
  skewText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
    transform: [{ skewX: '15deg' }], // 反向倾斜，还原文字水平
  },
});

export default LeftSkewedButton;

右侧倾斜按钮组件 #

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const RightSkewedButton = ({ title, onPress, buttonStyle, textStyle }) => {
  return (
    <TouchableOpacity 
      style={[styles.rightSkewContainer, buttonStyle]} 
      onPress={onPress}
    >
      <Text style={[styles.skewText, textStyle]}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  rightSkewContainer: {
    backgroundColor: '#2563eb',
    paddingVertical: 12,
    paddingHorizontal: 24,
    paddingRight: 32, // 右侧倾斜后补间距
    transform: [{ skewX: '15deg' }],
  },
  skewText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
    transform: [{ skewX: '-15deg' }], // 反向倾斜还原文字
  },
});

export default RightSkewedButton;

使用示例 #

import React from 'react';
import { View, StyleSheet } from 'react-native';
import LeftSkewedButton from './LeftSkewedButton';
import RightSkewedButton from './RightSkewedButton';

const App = () => {
  return (
    <View style={styles.container}>
      <LeftSkewedButton 
        title="左侧倾斜按钮" 
        onPress={() => console.log('左侧按钮点击')}
      />
      <RightSkewedButton 
        title="右侧倾斜按钮" 
        onPress={() => console.log('右侧按钮点击')}
        buttonStyle={{ backgroundColor: '#ef4444' }}
        textStyle={{ fontSize: 18 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 20,
  },
});

export default App;

自定义调整说明 #

• 修改skewX的角度值（如-10deg或10deg）可以调整倾斜程度
• 通过buttonStyle和textStyle props可以自定义按钮背景色、文字样式、内边距等
• 调整paddingLeft/paddingRight的值，适配不同倾斜角度下的内容显示位置

内容的提问来源于stack exchange，提问作者junaif