我在使用react-native时遇到了类似的问题，实现了一个不是最合适的HACK解决方案，下面是从我的组件中提取的示例。

组件.js

import { Text, View, StyleSheet, Image } from "react-native";
export const StoryImage = ({ stories, image }) => {

  let arr = [];
  for (let i = 0; i < stories; i++) {
    arr.push(i);
  }

  return (
    <View
      style={{
        backgroundColor: "blue",
        borderRadius: 52,
        width: 100,
        height: 100,
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "flex-start",
        overflow: "hidden",
      }}
    >
      <Image
        source={{
          uri: image,
        }}
        style={{
          width: 95,
          height: 95,
          marginTop: 2.5,
          zIndex: 1,
          borderRadius: 50,
          borderWidth: 2,
          borderColor: "white",
        }}
      />

      {stories > 1 &&
        arr.map((ste, ind) => {
          return (
            <View
              style={{
                backgroundColor: "white",
                height: 52,
                width: 2,
                position: "absolute",
                left: ind === 0 ? 48 : 50,

                transform: [
                  { translateX: -1 },
                  { translateY: 25 },
                  {
                    rotate: `${(360 / stories) * ind}deg`,
                  },
                  { translateX: 1 },
                  { translateY: -25 },
                ],
              }}
            />
          );
        })}
    </View>
  );
};

export default StoryImage;

用法

<StoryImage image={"https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80"} stories={5} />