使用 React-Native 在图像周围环绕文本

Question

我尝试创建一个包含图像和环绕图像组件的文本组件的视图。

我的造型：

  textContainer: {
    flexDirection: 'row',
  },
  text: {
    flex: 10,
  },
  image: {
    flex:1,
    height: 180,
    width: 150,    
    margin: 10,
    borderColor: '#ccc',
    borderWidth: 1,
  }

我的组件：

<ScrollView style={styles.contentContainer} >
   {this.props.content.title_1 ? <Text style={styles.title}>{this.props.content.title_1}</Text> : null}
   <View style={styles.textContainer}>
      {this.props.content.text_1 ? <Text style={styles.text}>{this.props.content.text_1}</Text> : null}
      {this.props.content.image_1 ? <Image width={null} height={null} style={styles.image} source={this.props.content.image_1} /> : null}
   </View>
</ScrollView>

结果是这样的：（根本没有换行哈哈）

在下面的图片中，我很快将小图片黑进了文字中。但是我无法让文字环绕..

我希望任何人都可以在正确的方向上帮助我！

Answer 1

这真的很难，但是有一种奇怪的方法可以做到这一点。请尝试以下操作。它对我有用，但我这样做的地方在其他视图中太深了。:

<Text>
  <View style={{width:400, height:100, flex:1, flexDirection:'row'}}>
     <Image source={require('')}/>
     <Text>Your Content Here</Text>
  </View>

</Text>

祝你好运。请发表评论让我们知道它是否有效。

Answer 2

在 android 上，您不能在文本中放置视图，但可以放置图像，示例如下：

<Text> 
  <Image source="" />
  <Text> Insert your text here </Text>
</Text>

Answer 3

虽然这是旧的 post，但我会添加它，因为我最近遇到了这个问题，并且发现了一种完全不同的方法适合我。我手上没有代码（谁要我可以拿），但原理是这样的：

要求：在屏幕左上角有一张图片，大约占屏幕宽度的一半，文本从它的右边开始，然后在它下面继续整个宽度屏幕。
在 XML 中，创建一个包含左侧 ImageView (IV) 和右侧 TextView (TVA) 的 RelativeLayout，设置为包装内容。然后创建另一个 TextView (TVB) 以位于 Relative Layout 下方。 TVA 用于图片旁边的文字，TVB 用于图片下方的文字。
将您的图像放入 IV。然后以像素 (dpi) 为单位测量 IV 的高度。称这个高度为IVh
将您的一些文本放入 TVA。只要有足够的文本来换行，多少并不重要。然后以像素为单位测量 TVA 的高度。称这个高度为 TVh
比较IVh和TVh。如果 IVh=TVh，那么您的图像旁边的文字数量恰到好处。如果 TVh = IVh x 2 那么文本的数量是应有的两倍。依此类推
相应地调整字数，将正确的数字放入TVA，替换原来的，然后将其余文字放入TVB。

您需要尝试使用边距和填充，以便在图像周围留出足够的边距。此外，在将图像放入 ImageView 或将文本放入 TextView 后的第 3 步和第 4 步中，在测量高度之前需要延迟，以允许创建显示 - 否则测量会过早完成，在此之前是屏幕上的任何东西，return 高度为零。我发现 200 毫秒已经足够了，而且对于用户来说太快了以至于无法注意到延迟。

使用 React-Native 在图像周围环绕文本

Wrapping text around an image with React-Native

word-wrap

react-native

react-native-android