Css React Native中的Flex问题

需要造型方面的帮助，我在“Flex”方面很差。 如果消息很长，则会显示该图标。单击它，消息将展开。需要将其显示在时间戳旁边，如下所示

代码：

请在这个造型上需要帮助！！！！！ 几个小时以来一直在努力解决这个问题

更新：

---

两者都使用了公共视图，而且效果很好。但是我有一些额外的空间需要移除。我该怎么做呢？

首先，我注意到您有3个关闭的

标记，只有2个打开的

标记。可能是因为你做的复制/粘贴有问题

首先，我要考虑我们想要展示的内容的结构

由于您希望将文本和图标对齐在一起，因此它们共享同一个容器是有意义的

<View style={row}>
  <View style={textContainer}>
    <Text style={title}>Hospital Authority </Text>
    { arrowClicked === true ? 
    <Textstyle={subtitle}>{alert}</Text>
    :
    <Textstyle={subtitle}>{alert}</Text>
    }
    <View style={timestampAndArrowContainer}>
      <Text style={time}>{timestampToStr(createDate)}</Text>
      { 
        alert.charAt(100) !== "" ?
          arrowClicked === true ? 
          <Icon type='materialicons' name='arrow-drop-up' size={35} onPress={()=>{this.setFullLength()}}  />
          : 
          <Icon type='materialicons' name='arrow-drop-down' size={35} onPress={()=>{this.setFullLength()}}  />
        : null
      }
    </View>
  </View>
</View>

---

首先，我注意到您有3个关闭的

标记，只有2个打开的

标记。可能是因为你做的复制/粘贴有问题

首先，我要考虑我们想要展示的内容的结构

由于您希望将文本和图标对齐在一起，因此它们共享同一个容器是有意义的

<View style={row}>
  <View style={textContainer}>
    <Text style={title}>Hospital Authority </Text>
    { arrowClicked === true ? 
    <Textstyle={subtitle}>{alert}</Text>
    :
    <Textstyle={subtitle}>{alert}</Text>
    }
    <View style={timestampAndArrowContainer}>
      <Text style={time}>{timestampToStr(createDate)}</Text>
      { 
        alert.charAt(100) !== "" ?
          arrowClicked === true ? 
          <Icon type='materialicons' name='arrow-drop-up' size={35} onPress={()=>{this.setFullLength()}}  />
          : 
          <Icon type='materialicons' name='arrow-drop-down' size={35} onPress={()=>{this.setFullLength()}}  />
        : null
      }
    </View>
  </View>
</View>

<View style={row}>
  <View style={textContainer}>
    <Text style={title}>Hospital Authority </Text>
    { arrowClicked === true ? 
    <Textstyle={subtitle}>{alert}</Text>
    :
    <Textstyle={subtitle}>{alert}</Text>
    }
    <View style={timestampAndArrowContainer}>
      <Text style={time}>{timestampToStr(createDate)}</Text>
      { 
        alert.charAt(100) !== "" ?
          arrowClicked === true ? 
          <Icon type='materialicons' name='arrow-drop-up' size={35} onPress={()=>{this.setFullLength()}}  />
          : 
          <Icon type='materialicons' name='arrow-drop-down' size={35} onPress={()=>{this.setFullLength()}}  />
        : null
      }
    </View>
  </View>
</View>

const styles = StyleSheet.create({
  [...] // rest of your styles
  timestampAndArrowContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  }
})