柔性箱动态宽度和高度

Question

我正在尝试使用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>

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

Answer 1

我遇到了同样的问题.我尝试了很多东西,包括在这里放置包装(如前面的答案所述).他们都没有工作.

@AndréJunges的回答是不正确的,因为@kingkong和我有不同的要求.

然后,我看到flex也可以取值-1.并设置它解决了问题.

这是代码:

const messages = [
              'hello',
              'this is supposed to be a bit of a long line.',
              'bye'
              ];
return (
  <View style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: 150,
            alignItems: 'flex-end',
            justifyContent: 'flex-start',
            backgroundColor: '#fff',
            }}>

{messages.map( (message, index) => (
  <View key={index} style={{
                  flexDirection: 'row',
                  marginTop: 10
                }}>
    <View style={{
                  flex: -1,
                  marginLeft: 5,
                  marginRight: 5,
                  backgroundColor: '#CCC',
                  borderRadius: 10,
                  padding: 5,
                }}>
      <Text style={{
                    fontSize: 12,
                    }}>
        {message}
      </Text>
    </View>
    <Image source={require('some_path')} style={{width:30,height:30}} />
   </View> 
  ))} 
 </View>
)

这是结果:

Answer 2

所以我认为这里的策略是你想要将消息气泡包含在全宽块内，然后有两个内部视图。一个内部视图尝试尽可能薄，这就是您放入文本的视图。另一个内部视图尝试尽可能宽，从而压缩另一个块，使其宽度足以包含文本。

<View style={{flex:1,backgroundColor:'blue',flexDirection:'row'}}>
  <View style={{flex:0,backgroundColor:'red'}}>
    <Text>123</Text>
  </View>
  <View style={{backgroundColor:'orange', flex: 1}}/> 
</View>