React Native自定义形状绘制：如何实现目标设计？

问题描述 #

尝试在React Native中绘制自定义形状，当前代码无法正常运行，需要实现目标设计图效果，同时需要了解如何按需修改方形形状。代码如下：

<Animated.View style={{ flex: 1 }}>
    <View style={{ height: '10%', width: '100%', backgroundColor: 'orange', flexDirection: 'row', justifyContent: 'center' }}>
        <Text style={{ fontSize: 26, fontWeight: '600', color: 'black', position: 'absolute', bottom: 10 }}>Dashboard</Text>
    </View>
    <View style={{ height: '100%', width: '100%', flexDirection: 'row', backgroundColor: 'white' }}>
        <View style={{
            height: '90%', width: '30%', backgroundColor: 'lightgrey', justifyContent: 'center',
        }}>
            <View>
                {/* 缺失ScrollView起始标签 */}
                <TouchableOpacity style={{
                    width: 200, // top width
                    height: 0,
                    borderBottomWidth: 50, //hight
                    borderBottomColor: "red",
                    borderLeftWidth: 0,
                    borderLeftColor: "transparent",
                    borderRightWidth: 50,
                    borderRightColor: "transparent",
                    borderStyle: "solid",
                }}>
                </TouchableOpacity>
            </View>
        </View>
        <View style={{
            height: '90%', width: '70%', backgroundColor: 'lightgrey', 
            justifyContent: 'center'
        }}>
            <View>
                <ScrollView style={{ width: '100%', backgroundColor: 'grey' }}>
                    <TouchableOpacity style={{ height: 100, width: '55%', backgroundColor: '#ffe4c4', justifyContent: 'center', alignItems: 'center', marginTop: 20, borderTopRightRadius: 30, borderBottomRightRadius: 30 }}>
                        <Text>dfjhxc</Text>
                    </TouchableOpacity>
                </ScrollView>
            </View>
        </View>
    </View>
</Animated.View>

问题分析 #

1. 标签结构错误：左侧区域ScrollView只有闭合标签，缺少起始标签，导致组件渲染失败。
2. 布局高度冲突：中间外层View设置height: '100%'，叠加顶部10%高度的导航栏后，整体布局超出屏幕，引发显示异常。
3. 自定义形状适配问题：通过border绘制的形状尺寸固定，在不同屏幕尺寸下无法适配父容器宽度，视觉效果可能不符合设计需求。

修复与实现方案 #

1. 修正基础结构与布局 #

先修复标签错误，调整布局高度确保适配屏幕：

import { Animated, View, Text, ScrollView, TouchableOpacity } from 'react-native';

// 组件内部渲染函数
return (
    <Animated.View style={{ flex: 1 }}>
        {/* 顶部导航栏 */}
        <View style={{ height: '10%', width: '100%', backgroundColor: 'orange', justifyContent: 'flex-end', alignItems: 'center', paddingBottom: 10 }}>
            <Text style={{ fontSize: 26, fontWeight: '600', color: 'black' }}>Dashboard</Text>
        </View>
        {/* 主内容区域，占剩余90%高度 */}
        <View style={{ flex: 1, flexDirection: 'row', backgroundColor: 'white' }}>
            {/* 左侧侧边栏 */}
            <View style={{ width: '30%', backgroundColor: 'lightgrey' }}>
                <ScrollView style={{ flex: 1 }}>
                    {/* 自定义形状按钮 */}
                    <TouchableOpacity style={{
                        alignSelf: 'center',
                        width: '80%', // 适配父容器宽度
                        height: 0,
                        borderBottomWidth: 50,
                        borderBottomColor: "red",
                        borderLeftWidth: 0,
                        borderLeftColor: "transparent",
                        borderRightWidth: 20, // 调整右侧透明边框宽度改变形状
                        borderRightColor: "transparent",
                        borderStyle: "solid",
                        marginVertical: 20
                    }}>
                    </TouchableOpacity>
                    {/* 可添加更多自定义形状按钮 */}
                </ScrollView>
            </View>
            {/* 右侧内容区 */}
            <View style={{ width: '70%', backgroundColor: 'lightgrey' }}>
                <ScrollView style={{ flex: 1, backgroundColor: 'grey' }}>
                    <TouchableOpacity style={{ 
                        height: 100, 
                        width: '55%', 
                        backgroundColor: '#ffe4c4', 
                        justifyContent: 'center', 
                        alignItems: 'center', 
                        marginTop: 20, 
                        borderTopRightRadius: 30, 
                        borderBottomRightRadius: 30 
                    }}>
                        <Text>dfjhxc</Text>
                    </TouchableOpacity>
                </ScrollView>
            </View>
        </View>
    </Animated.View>
);

2. 自定义形状修改方法 #

方式一：通过Border样式绘制简单形状

利用边框特性可绘制三角形、梯形等基础形状，调整以下参数修改形状：

• 倾斜度：修改borderRightWidth/borderLeftWidth数值，数值越大对应侧倾斜程度越高。
• 高度：调整borderBottomWidth数值，数值越大形状高度越高。
• 顶部宽度：修改width属性，控制形状顶部水平宽度。
• 反向形状：若需左侧倾斜，设置borderLeftWidth而非borderRightWidth，同时将borderRightWidth设为0。

示例：左侧倾斜的梯形

<TouchableOpacity style={{
    width: '80%',
    height: 0,
    borderBottomWidth: 50,
    borderBottomColor: "blue",
    borderRightWidth: 0,
    borderRightColor: "transparent",
    borderLeftWidth: 20,
    borderLeftColor: "transparent",
    borderStyle: "solid",
    marginVertical: 20
}}>
</TouchableOpacity>

方式二：使用SVG绘制复杂形状

如果需要圆角多边形、不规则曲线等复杂形状，推荐用react-native-svg库精准控制路径：

1. 安装依赖：npm install react-native-svg
2. 示例代码：

import Svg, { Path } from 'react-native-svg';

// 在ScrollView中使用
<Svg width="100%" height={60} style={{ marginVertical:20 }}>
    <Path
        d="M20,0 L180,0 L200,50 L0,50 Z" // 修改路径指令调整形状
        fill="green"
    />
</Svg>

通过修改d属性的路径指令，可绘制任意复杂形状。

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