伸缩框的动态宽度和高度 [英] Flex box dynamic width and height

问题描述

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

I am trying to create a messages view using react-native e.g.:

如您所见:

1. 气泡根据内容具有动态的宽度和高度
2. 气泡有最大宽度，并且会向下生长

我正在尝试使用react native来重新创建它，但是我只能实现(2)，并且不确定如何实现这两个目标.这就是我到目前为止所拥有的:

I am trying to recreate this using react native, however I am only able to acheive (2) and not sure how to go about acheiving both.. this is what i have thus far:

  <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>

如果我增加橙色视图以表示一个大气泡，则它会从屏幕上消失...例如:

If I increase the orange view to represent a big bubble then it just goes off the screen... e.g.:

推荐答案

我遇到了同样的问题.我尝试了很多事情，包括到处都放包装纸(就像前面的答案中提到的那样).他们都没有工作.

I was having same issue. I tried many things including putting wrappers here-and-there (like mentioned in previous answers). None of them worked.

@AndréJunges的答案不正确，因为@kingkong和我有不同的要求.

@André Junges's answer is not correct because @kingkong and I have different requirements.

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

Then, I saw that flex can also take value -1. And setting it solved the problem.

这是代码:

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>
)

结果如下:

这篇关于伸缩框的动态宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！