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

您需要向包含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

Answer 2

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

您也可以将justify-content: space-between应用于Flex容器，该容器会对齐相对边缘的两个弹性项目。

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

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

2 个答案: