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

此样式需要帮助！！！！！！几个小时以来一直在努力解决这个问题！

更新：
对两者都使用通用视图并且它有效。但是我有一些额外的 space 需要删除。我该怎么做？？？

Answer 1

首先，我注意到您有 3 个关闭的 <View/> 标签，只有 2 个打开的 <View> 标签。也许这是您所做的 copy/paste 的问题。

我会首先考虑我们要显示的内容的结构。

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

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

React Native 中的 Flex 问题

Flex issue in React Native

css

reactjs

react-native

flexbox

flex-grow