Question

我尝试创建一个包含图像的视图和一个包裹Image组件的Text组件。

我的造型：

  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

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

要求：在屏幕左上角有一张占据屏幕宽度一半左右的图片，文字从右边开始，然后在屏幕的整个宽度下继续显示。
在XML中，在左侧创建一个包含ImageView（IV）的RelativeLayout，在右侧创建一个包含内容的TextView（TVA）。然后创建另一个TextView（TVB）以位于相对布局下方。 TVA用于图像旁边的文本，TVB用于其下面的文本。
将图像放入IV。然后测量IV的高度（以像素为单位）（dpi）。称这个身高为IVh
将部分文字放入TVA。只要有足够的文字来包裹几行，它并不重要。然后以像素为单位测量TVA的高度。把这个高度称为TVh
将IVh与TVh进行比较。如果IVh = TVh，那么您可以在图像旁边放置适量的文本。如果TVh = IVh x 2那么你的文本应该是你应该拥有的两倍。等等。
相应地调整单词数量，并将正确的数字放入TVA，替换那里的内容，然后将其余文本放入TVB。

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

Answer 3

我参加聚会有点晚了，但是我已经通过以下方法设法克服了这个问题...

<Card containerStyle={{minHeight: 100}}>
    <TouchableOpacity>
        <View style={{flexDirection: 'row', flex: 2, maxHeight: 55}}>
            <View style={{flex: 1}}>
                <Image style={styles.productImage} source={{uri: images[0].src}} />
            </View>
            <View style={{flex: 5}}>
                <Text numberOfLines={2} ellipsizeMode='tail' >
                    {product.item.title}
                </Text>
            </View>
        </View>
        <View style={{flexDirection: 'column', flex: 4}}>
            <Text>{product.item.description}</Text>
        </View>
    </TouchableOpacity>
</Card>

显然，这是我的特定需求所独有的，但是您应该能够实现所需的结果。

对我最有帮助的是...

了解flexbox及其与本机反应的关联
使用“文本”组件的“ numberOfLines”属性（在我的情况下为“ ellipsizeMode”
适当调整我的观点

在上面做我最终的布局看起来像这样...

Answer 4

在Android上你不能在文本中放置一个View，但你可以放置一个Image，这是一个例子：

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

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

4 个答案: