React Native 中的 Flex 问题答案

【问题标题】：Flex issue in React NativeReact Native 中的 Flex 问题
【发布时间】：2020-06-02 09:18:33
【问题描述】：

需要样式方面的帮助，但我不擅长“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'
  }
})

请在此样式方面寻求帮助！！！！数小时以来一直在为此苦苦挣扎！

更新：
对两者都使用了共同视图，并且它起作用了。但是我有一些额外的空间需要删除。我该怎么做？？？

【问题讨论】：

标签： css reactjs react-native flexbox flex-grow

【解决方案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>

对于你的风格，你可以试试这样的

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

【讨论】：