javascript - 在 native react 中在圆周上渲染文本

Question

我有一个一般性问题。

如果我有一个圆圈，我想沿着圆圈的顶部拱形渲染文本，那么我该如何在 React Native 中实现？

我会发布一个示例来说明我将如何尝试此操作，但老实说，我什至不知道如何开始。

Answer 1

感谢 msand: ( https://github.com/react-native-community/react-native-svg/issues/972 )

这里是如何在没有 expo 的情况下做到这一点:

import React, { Component } from 'react';
import { View, Image } from 'react-native';
import {  Circle, Text as SvgText, TextPath, TSpan, G, Svg }
  from 'react-native-svg';

export class ListScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center' }}>

        <Svg position="absolute" height="200" width="200"
          viewBox="0 0 300 300">
          <G id="circle">
            <Circle
              r={75}
              x={150}
              y={176}
              fill="none"
              stroke="#fff"
              strokeWidth={14}
              transform="rotate(-145)"
            />
          </G>
          <SvgText fill="#000" fontSize="14">
            <TextPath href="#circle">
              <TSpan dx="0" dy={-20}>
                Text along a curved path2
              </TSpan>
            </TextPath>
          </SvgText>
        </Svg>
        <View>
          <Image
            style={{ height: 120, width: 120, borderRadius: 60,
              marginTop: 70 }}
            source={require('./dog.jpg')}
          />
        </View>
      </View>
    )
  }
}

还有世博会:

import * as React from 'react';
import { View, Image } from 'react-native';
import { Constants, Svg } from 'expo';

const { Circle, Text, TextPath, TSpan, G, Path } = Svg;

const SvgComponent = props => (
  <View style={{ flex: 1, justifyContent: 'center',
    paddingTop: Constants.statusBarHeight, padding: 0 }}>
    <Svg height="100%" width="100%" viewBox="0 0 300 300" {...props}>
      <G id="circle">
        <Circle
          r={100}
          x={150}
          y={150}
          fill="none"
          stroke="none"
          strokeWidth={0}
          transform="rotate(-135)"
        />
      </G>
      <Image
        style={{ width: 220, height: 220, borderRadius: 110,
          marginLeft: 68, marginTop: 175 }}
        source={require('./doggy.jpg')}
      />
      <Text fill="#000" fontSize="14">
        <Text fill="#000" fontSize="14">
          <TextPath href="#circle">
            <TSpan dy={0}>
              Text along a curved path...
            </TSpan>
          </TextPath>
        </Text>
      </Text>
    </Svg>
  </View>
);