Flexbox - React Native

Flexbox - React Native

我是 React Native 的新手,我正在尝试制作聊天应用程序布局。

正如您在我附加的屏幕截图中看到的那样,我希望文本框与其中的文本一样多 space。例如,如果我发送 'Hi',它应该只被拉伸到 space 'Hi' 需要的程度。 如果我发送一个长文本,那么它应该伸展并占用与该文本一样多的 space。就像它发生在几乎所有短信应用程序中一样。

文本框代码为:

<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',
  },

将视图样式设置为 flex: 0 以便根据需要将其作为 Maus h space。

  <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

我是如何实现的,我从两个元素中删除了 flex: 3 和 flex: 1,这样它们就不会扩展到最大值 space,并且我将 flexShrink: 1 添加到文本,以便它始终收缩以保持正确的元素完好无损。

Snack link