React Native 中的 Flex 問題

Question

需要造型幫助，並且在“Flex”方面表現不佳。 如果消息很長，則會顯示該圖標。 單擊它並擴展消息。 需要將其顯示在時間戳旁邊，如下所示。

代碼：

 <View style={row}>
<View style={textContainer}>
              <Text style={title}>Hospital Authority </Text>
              { arrowClicked === true ? 
              <Textstyle={subtitle}>{alert}</Text>
              :
              <Textstyle={subtitle}>{alert}</Text>
              }
              <Text style={time}>{timestampToStr(createDate)}</Text>        
            </View>

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

css：

const styles = StyleSheet.create({
  row: { 
    flexDirection: 'row', 
    alignItems: 'flex-start',
    marginLeft: 15,
    marginRight: 15,
    paddingTop: 5,
    paddingBottom: 10
  },
  textContainer: {
    flex: 3,
    paddingLeft: 15
  },
title: {
    flex: 1,
    color: '#000000',
    fontWeight: 'bold'
  },
  subTitle: {
    flex: 1,
    color: '#000000'
  },
  time: {
    flex: 1,
    color: '#808080'
  }
})

求這個造型的幫助！！！！！！ 數小時以來一直在為此苦苦掙扎！

更新：
對兩者都使用了共同的視圖，並且它起作用了。 但是我有一些額外的空間需要刪除。 我怎樣才能做到這一點？？？

Answer 1

首先，我注意到你有 3 個關閉的<View/>標簽，只有 2 個打開的<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>

對於您的 styles，您可以嘗試這樣的事情

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