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

发布时间：2020-12-15 05:07:28 所属栏目：百科来源：网络整理

导读：我尝试创建一个带有图像的视图和一个包裹 Image组件的Text组件. 我的造型： textContainer: { flexDirection: 'row',},text: { flex: 10,image: { flex:1,height: 180,width: 150,margin: 10,borderColor: '#ccc',borderWidth: 1,} 我的组件： ScrollView st

我尝试创建一个带有图像的视图和一个包裹 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>

这就是结果:(根本没有包装哈哈)

在这里的图片中,我很快将小图片刻录到文本中.但我无法将文字包裹起来..

我希望任何人都可以帮助我朝着正确的方向前进！

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

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

</Text>

祝好运.请发表评论,告诉我们是否有效.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!