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

以這種方式構建它，文本將始終居中：