無法將文本對齊到該行的右側

Question

我正在尋找在我的行右側設置日期的位置。

下面是代碼：

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    marginTop: 64, 
    }, 
    row: { 
    flexDirection: 'row', 
    alignItems: 'center', 
    margin: 5, 
    backgroundColor: 'green', 
    }, 
    horizontalAlign: { 
    flexDirection: 'row', 
    alignItems: 'center', 
    backgroundColor: 'red', 
    }, 
    rowTitle: { 
    fontFamily: 'Helvetica', 
    fontSize: 17, 
    marginLeft: 10, 
    flex: 1, 
    textAlign:'center' 
    }, 
    rowDate: { 
    textAlign: 'right', 
    }, 
    rowText: { 
    fontFamily: 'Helvetica', 
    fontSize: 17, 
    marginLeft: 10, 
    }, 
    rowImage: { 
    width: 35, 
    height: 35, 
    borderRadius: 17.5, 
    }, 
}); 

renderRow(rowData, sectionID, rowID, _highlightRow) { 
    return (
    <TouchableHighlight onPress={() => { this.rowPressed(rowData.recordID || null); }}> 
     <View style={styles.row}> 
     <Image source={ require('myImage.png') } style={styles.rowImage} /> 
     <View> 
      <View style={styles.horizontalAlign}> 
      <Text style={styles.rowTitle}>{rowData.title}</Text> 
      <Text style={styles.rowDate}>{rowData.date}</Text> 
      </View> 
      <Text style={styles.rowText}>{rowData.text}</Text> 
     </View> 
     </View> 
    </TouchableHighlight> 
); 
} 

render() { 
    return (
    <View style={styles.container}> 
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={::this.renderRow} 
     /> 
    </View> 
); 
} 

截圖：

什麼建議嗎？

Answer 1

您需要添加的柔性：1個屬性到包含rowData.title視圖和rowData.date。我已經用你的數據here設置了一個例子。

<View style={{flex:1}}> 
    <View style={styles.horizontalAlign}> 
    <Text style={styles.rowTitle}>{rowData.title}</Text> 
    <Text style={styles.rowDate}>{rowData.date}</Text> 
    </View> 
    <Text style={styles.rowText}>{rowData.text}</Text> 
</View> 

https://rnplay.org/apps/mWO0LQ

Answer 2

我對React不熟悉，但在標準CSS中，將margin-left: auto應用於日期項目。

您還可以將justify-content: space-between應用於柔性容器，該柔性容器將在相對的邊緣上對齊兩個柔性物品。

（這些解決方案假定在其上的柔性物品存在是自由的線延伸到所述容器的整個寬度。）