10

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

我的造型：

  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>

结果是这样的：（根本没有包装哈哈）

在此处输入图像描述

在下面的图片中，我很快将小图片破解到文本中。但我无法让文字被环绕..

例子

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

4

3 回答 3

4

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

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

</Text>

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

于 2017-04-20T20:46:54.150 回答
1

在 android 上，您不能在 Text 中放置 View，但可以放置 Image，这是一个示例：

<Text> 
  <Image source="" />
  <Text> Insert your text here </Text>
</Text>
于 2017-09-12T08:50:06.360 回答
-1

虽然这是一篇旧帖子，但我会添加它，因为我最近遇到了这个问题，并发现了一种完全不同的方法对我有用。我手头没有代码（如果有人想要，我可以得到它），但原则是：

  1. 要求：在屏幕的左上角有一个图片，大约占屏幕宽度的一半，文字从它的右侧开始，然后在它的下方持续整个屏幕的宽度。

  2. 在 XML 中，创建一个 RelativeLayout，其中左侧包含一个 ImageView (IV)，右侧包含一个设置为包装内容的 TextView (TVA)。然后创建另一个 TextView (TVB) 位于相对布局下方。TVA 用于图像旁边的文本，TVB 用于其下方的文本。

  3. 将您的图像放在 IV 中。然后以像素 (dpi) 为单位测量 IV 的高度。称这个高度为 IVh

  4. 将您的一些文本放入 TVA。只要有足够的文本可以覆盖多行，多少并不重要。然后以像素为单位测量 TVA 的高度。称这个高度为 TVh

  5. 比较 IVh 和 TVh。如果 IVh=TVh，那么您的图像旁边就有适量的文本。如果 TVh = IVh x 2，那么您的文本数量是应有的两倍。等等。

  6. 相应地调整字数并将正确的数字放入TVA，替换那里的内容，然后将其余文本放入TVB。

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

于 2018-03-23T14:37:27.337 回答