Flexbox - 反应原生答案

【问题标题】：Flexbox - React NativeFlexbox - 反应原生
【发布时间】：2021-11-07 13:04:15
【问题描述】：

我是原生反应新手，我正在尝试制作聊天应用程序布局。

正如您在我附加的屏幕截图中看到的那样，我希望文本框占用与其中文本一样多的空间。例如，如果我发送“嗨”，它应该只拉伸“嗨”需要的空间。如果我发送一个长文本，那么它应该拉伸并占用与该文本一样多的空间。就像它发生在几乎所有的短信应用中一样。

文本框代码为：

<TouchableOpacity>
        <View style={styles.containerSent}>
          <View style={{flex: 3}}>
            <Text style={styles.message}>{item.message}</Text>
          </View>
          <View style={{flex: 1}}>
            <Image
              source={require('../assets/images/check.png')}
              style={styles.image}
            />
            <Text style={{textAlign: 'right', color: 'white'}}>
              {msToTime(item.timestamp)}
            </Text>
          </View>
        </View>
      </TouchableOpacity>

样式表

  containerSent: {
    flex: 1,
    maxWidth: '70%',
    // minWidth: '30%',
    marginTop: 20,
    paddingTop: 20,
    paddingHorizontal: 10,
    paddingBottom: 10,
    borderWidth: 1,
    backgroundColor: '#6F2232',
    borderRadius: 20,
    alignSelf: 'flex-end',
    flexDirection: 'row',
    justifyContent: 'space-between',
    // justifyContent: 'flex-end',
  },

  message: {
    color: 'white',
    fontSize: 15,
    fontWeight: 'bold',
    textAlign: 'left',
    alignSelf: 'stretch',
  },

  image: {
    width: 15,
    height: 15,
    marginLeft: 20,
    marginBottom: 5,
    alignSelf: 'flex-end',
  },

【问题讨论】：

标签： javascript reactjs react-native flexbox styling

【解决方案1】：

将视图样式设置为flex: 0，以便在必要时将其作为鼠空间。

  <TouchableOpacity>
    <View style={styles.containerSent}>
      <View style={{ flex: 0 }}>
        <Text style={styles.message}>{'q.a'}</Text>
      </View>
      <View style={{ flex: 0, paddingLeft: 10 }}>
        <Text style={styles.message}>{'eeeee.message'}</Text>
      </View>
    </View>
  </TouchableOpacity>

看看我的sample

【讨论】：

【解决方案2】：

我是如何实现的，我从两个元素中删除了 flex: 3 和 flex: 1 ，这样它们就不会扩展以占用最大空间，我在文本中添加了 flexShrink: 1 ，所以它总是收缩保持正确的元素完好无损。

Snack link

【讨论】：