圖標導致視圖中的間隙-React Native

Question

我有一個看起來像這樣的ListView：

如您所見，下拉箭頭圖標在每個項目的左側，恰好在文本的第一行上方創建一個間隙。 我想避免這個差距，當前代碼：

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

我嘗試將其與標記一起放置在內：

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

這樣可以消除間隙，但不會將其放在同一位置（在屏幕右側）。 我嘗試將Text標簽的flex設置為1，但這使事情完全搞砸了，有沒有辦法讓Icon與文本保持內聯，並一直保持向右？

Answer 1

包含圖標和單元格內容的<View>將使用默認的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>