反应原生

Question

我有一个普遍的问题。

如果我有一个圆圈而且我想将文字单独渲染到圆圈的顶部拱形，那么我将如何以原生的方式进行反应？

我会发布一个例子，说明我将如何尝试这一点，但说实话，我还没有弄清楚我将如何开始这一事件。

Answer 1

感谢msand：（https://github.com/react-native-community/react-native-svg/issues/972）

这是没有博览会的情况：

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>
);