Javascript 图标导致视图中出现间隙-反应本机

我有一个列表视图，看起来是这样的：

正如您所看到的，下拉箭头图标在每个项目左侧的第一位文本上方创建了一个间隙。我希望避免出现这种差距，当前代码：

<Item key={i+tk}>
                <TouchableOpacity onPress={() => this.setState({prevIndex: this.state.activeIndex, activeIndex: i+tk,
                    messageJustClosed:  (this.state.prevIndex === i+tk  && !this.state.messageJustClosed)})} style={{flex: 1}}>
                <View>
                    <Icon  name= {this.getIconImage(i+tk)} size={30} color="black" style={{alignSelf: 'flex-end'}}/>

                    <Text style = {styles.text}>{messageType[i].title}</Text>
                  <Text style = {styles.dateText}>{new Date(messageType[i].created).toString().substring(0,21)}</Text>
                  <Expand value={ ((this.state.activeIndex === i+tk) && !(this.state.prevIndex === i+tk) ) || ((this.state.activeIndex === i+tk && this.state.messageJustClosed)) }>
                    <Text style = {{color: 'black'}}>{messageType[i].message}</Text>
                  </Expand>
                </View>

                </TouchableOpacity>
            </Item>

this.setState（{preveindex:this.state.activeIndex，activeIndex:i+tk，
messageJustClosed:（this.state.preveindex==i+tk&&！this.state.messageJustClosed）}style={{{flex:1}}>
{messageType[i].title}
{new Date（messageType[i].created）.toString（）.substring（0,21）}
{messageType[i].message}

我试着将其与标记内联，如下所示：

<Text style = {styles.text}>{messageType[i].title} <Icon  name= {this.getIconImage(i+tk)} size={30} color="black" style={{alignSelf: 'flex-end'}}/> </Text>

{messageType[i].title}

这样可以消除间隙，但不会将其放置在同一位置（屏幕右侧）。我尝试将文本标记的flex设置为1，但这完全把事情搞砸了，有没有办法让图标与文本对齐并一直向右？

您的

包含图标，并且单元格内容使用默认的

flexDirection:column

呈现，因此，如果您更改为

flexDirection:row

，您就可以完成您所追求的目标

下面是一个如何编写JSX的示例：

<View style={{ flexDirection: "row" }}>
        <View style={{ flex: 1 }}>
          <Text style={styles.text}>{messageType[i].title}</Text>
          <Text style={styles.dateText}>{new Date(messageType[i].created).toString().substring(0, 21)}</Text>
          <Expand
            value={
              (this.state.activeIndex === i + tk && !(this.state.prevIndex === i + tk)) ||
              (this.state.activeIndex === i + tk && this.state.messageJustClosed)
            }
          >
            <Text style={{ color: "black" }}>{messageType[i].message}</Text>
          </Expand>
        </View>
        <Icon name={this.getIconImage(i + tk)} size={30} color="black" />
      </View>

{messageType[i].title}
{new Date（messageType[i].created）.toString（）.substring（0,21）}
{messageType[i].message}