css - 如何使用 React Native 实现这样的目标

Question

我怎样才能制作这样的组件：

到目前为止，我设法做到了：

这是我的代码的样子：

viewStyle: {
        backgroundColor: color.bgColor,
        alignSelf: 'center',
        width: 100,
        height: '100%',
        top: '30%',
        transform: [{ scaleX: 4 }],
        zIndex: 1,
        borderTopEndRadius: 20,
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20
    },

标签： cssreact-nativereact-native-androidreact-native-stylesheet

Answer 1

改用图像更容易。但是您可以使用react-native-svg尝试一下

您搜索的形状可能尚未制作，因此您可以先学习如何制作矩形和圆形，如下所示：

import Svg, {
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import * as Svg from 'react-native-svg';
const { Circle, Rect } = Svg;
*/

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

export default class SvgExample extends React.Component {
  render() {
    return (
      <View
        style={[
          StyleSheet.absoluteFill,
          { alignItems: 'center', justifyContent: 'center' },
        ]}
      >
        <Svg height="50%" width="50%" viewBox="0 0 100 100">
          <Circle
            cx="50"
            cy="50"
            r="45"
            stroke="blue"
            strokeWidth="2.5"
            fill="green"
          />
          <Rect
            x="15"
            y="15"
            width="70"
            height="70"
            stroke="red"
            strokeWidth="2"
            fill="yellow"
          />
        </Svg>
      </View>
    );
  }
}

这是输出：

您正在搜索的内容可能会更长，并且需要以下许多精确配置：

position

colors

borders

等等...

但如果您不想使用图像，可以使用 react-native-svg 制作。