React-Native, как реализовать обтекание изображения текстом

Question

Я хочу добавить текст подсказки в изображение и с фоном? Как мне это сделать?

Answer 1

Просто оберните изображение с помощью относительного представления и добавьте текст внутри этого представления с абсолютным положением.

<View style={styles.app}>
        <Image
          style={styles.logo}
          source={{
            uri:
              "https://image.freepik.com/free-vector/businessman-character-avatar-isolated_24877-60111.jpg"
          }}
        />
        <Text style={styles.text}>Edit</Text>
      </View>

app: {
    marginHorizontal: "auto",
    height: 80,
    width: 80,
    position: "relative"
  },
  logo: {
    height: 80,
    width: 80,
    borderRadius: 40
  },
  text: {
    position: "absolute",
    bottom: 5,
    left: "50%",
    transform: "translate(-50%)",
    backgroundColor: "rgba(0, 0, 0, 0.2)",
    paddingHorizontal: 16
  }

Ссылка на игровую площадку