无法将文本对齐到行的右侧

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

我不熟悉 React，但在标准 CSS 中，将 margin-left: auto 应用于日期项。

您还可以将 justify-content: space-between 应用于弹性容器，这将使两个弹性项目在相对的边缘对齐。

（这些解决方案假设弹性项目所在的行可以自由扩展容器的整个宽度。）

Answer 2

您需要向包含 rowData.title 和 rowData.date 的视图添加 flex:1 属性。我已经用您的数据 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

无法将文本对齐到行的右侧

Unable to align text to the right of the row

css

flexbox

react-native