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”文本长度可以改变，并且在每种情况下都必须居中。

Answer 1

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

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

Answer 2

如果内容大小可以动态更改，我建议不要使用绝对 position。 我将只使用 flex-box 来构建它：

...
<View style={styles.itemContainer}>
  <Text>Foo</Text>
  <View style={styles.iconMock} />
</View>
...
const styles = StyleSheet.create({
  itemContainer: {
    alignItems: "center",
    //this has default flex: 0, which means the container will always have the size the children take.
    //we then tell it to centre all the children (items) which gives the needed effect.
  },
  iconMock: {
    backgroundColor: "blue",
    height: 50,
    width: 150,
  }
});

以这种方式构建它，文本将始终居中：