React Native 将多行文本环绕内联图像

ttvkxqim  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(125)

在react-native中,我发现一些主题说要将<Image>内联,但他们希望内联图像大小相同。我正在尝试多行 Package 。我使用了这个代码和演示-https://snack.expo.dev/@noitidart/wrap-multiple-lines-around-image

import React from 'react';
import { Image, Text, View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>
        <Image
          source={{ uri: 'https://via.placeholder.com/100' }}
          style={{
            width: 100,
            height: 100,
          }}
        />
        <Text style={{ flex: 1 }}>
          This is long text it should wrap around the image. Lorem ipsum even
          more haha that's kind of cool. Is this working? It is but it's only keeping the first line of text and then the second line and on are on top of the image.
        </Text>
      </Text>
    </View>
  );
}

然而,只有第一行尊重图像左侧的宽度。这里有一个截图,有人知道如何使多行 Package ?

tkclm6bt

tkclm6bt1#

要实现文本环绕图像的所需布局,
您可以使用具有适当样式的ImageBackground组件。
例如

<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
  <ImageBackground
    source={{ uri: 'url' }}
    style={{
      width: 100,
      height: 100
    }}>
    <Text></Text>
  </ImageBackground>
  <Text style={{ flex: 1 }}>
    text content
  </Text>
</View>

相关问题