时间戳

首页 > 解决方案 > React native - 如何用文本包装视图？

reactjs - React native - 如何用文本包装视图？

问题描述

在此处输入图像描述

像上面的截图一样，我希望用文本包裹视图（8.5）。

这是我尝试过的：

 <View style={{flexDirection:'row'}>
     <View style={{backgroundColor:'grey', padding:5, borderRadius:5, flexWrap:'wrap'}>
         <Text style={{fontSize:12, fontWeight:'bold'}>
            {item.score}
         </Text>
     </View>
     <Text style={{fontSize:14, fontWeight:'bold', color:'black'}>{item.title}</Text>
 </View>

在上面的代码中，Text 没有包裹乐谱视图，而是并排放置，如下所示：

在此处输入图像描述

如何确保视图被文本包裹？谢谢

---- Edit @Gaurav Roy's answer产生以下结果，除了背​​景颜色之外，哪些样式不适用于文本组件

在此处输入图像描述

标签： reactjsreact-native

解决方案

或者试试这个：

<View style={{ flex: 1, alignItems: "flex-start" }}>
  <Text style={{ fontSize: 14, fontWeight: "bold", color: "black" }}>
    <View
      style={{ backgroundColor: "grey", padding: 5, borderRadius: 5 }}
    >
      <Text
        style={{
          fontSize: 12,
          fontWeight: "bold"
        }}
      >
        8.5
      </Text>
    </View>
    this is a good example of how things can be achieved in the lord of
    the rings
  </Text>
</View>

推荐阅读