javascript - React Native 在 SVG 图像上放置一个文本

Question

我正在使用库：“react-native-svg”：“12.1.0”和“react-native-svg-transformer”：“0.14.3”

import FooIcon from '../assets/images/icons/fooIcon.svg';

<View style={{ flex: 1, paddingTop: 8 }}>
   <FooIcon></FooIcon>
   <View style={{ position: 'absolute', top: 35, bottom: 0, left: 14, right: 0 }} >
      <Text>foo</Text>
   </View>
</View>

如何让“foo”文本以 FooIcon 为中心。上面的解决方案没有使文本居中，这很重要，因为“foo”文本长度可以改变，并且在每种情况下都必须居中。

标签： javascriptcssreact-nativesvg

Answer 1

这段代码应该为您完成工作

    <View
    style={{
      justifyContent: 'center',
      alignItems: 'center'
    }}
    >
    <SVG /> //your svg image component goes here
    <Text
      style={{
        position: 'absolute'
      }}
    >
      Test
    </Text>
  </View>