小编kin*_*ong的帖子

柔性箱动态宽度和高度

我正在尝试使用react-native创建消息视图,例如:

在此输入图像描述

如你看到的:

  1. 气泡具有基于内容的动态宽度和高度
  2. 气泡有一个最大宽度,它们向下生长

我正在尝试使用本机重新创建这个,但是我只能实现(2)并且不确定如何实现两者的效果......这就是我到目前为止所拥有的:

在此输入图像描述

  <View style={{flex:1,backgroundColor:'blue',flexDirection:'row'}}>
     <View style={{backgroundColor:'orange'}}>
            <View style={{width:90,flex:1}}>
              <Text>123</Text>
              </View>
     </View>
     <View style={{flex:0.25,backgroundColor:'red'}}>
              <Text>123</Text>
     </View>
  </View>
Run Code Online (Sandbox Code Playgroud)

如果我增加橙色视图来代表一个大泡泡,那么它就会离开屏幕...例如:

在此输入图像描述

flexbox react-native

14
推荐指数
2
解决办法
1万
查看次数

标签 统计

flexbox ×1

react-native ×1