时间戳

首页 > 解决方案 > 在 ListView 中垂直对齐图标和文本 - React Native

javascript - 在 ListView 中垂直对齐图标和文本 - React Native

问题描述

我想做一个 ListView，每一行都应该包含一个图标和一个文本。但我需要它们垂直对齐。

编码：

export default class SettingsPage extends Component {

constructor() {
  super();
  const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  this.state = {
    dataSource: ds.cloneWithRows([
      {
        iconName: 'bell',
        title: 'bell'
      },
      {
        iconName: 'map-marker',
        title: 'map'
      },
    ]),
  };
}

_renderRow(rowData) {
  return (
    <View style={{borderBottomWidth:1, padding:20}}>
    <Text>
    <Icon name={rowData.iconName} size={40}/>
    <Text style={{fontSize:25}}>   {rowData.title}</Text>
    </Text>
  </View>
  );
}

render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={this._renderRow}
    />
  );
}
}

上面的代码生成：

组件未对齐

其中组件未对齐。

我该如何解决这个问题？

标签： javascriptcsslistviewreact-nativeicons

解决方案

尝试这样的事情： 

_renderRow(rowData) {
  return (
    <View style={{borderBottomWidth:1, padding:20, flex: 1, flexDirection: 'row'}}>
    <View style={{flex: 1}}>
      <Icon name={rowData.iconName} size={40}/>
    </View>
    <View style={{flex: 5}}>
      <Text style={{fontSize:25}}>   {rowData.title}</Text>
    </View>
  </View>
  );
}

调整<View>包装文本元素的 flex 值，以获得更符合您喜好的结果。

推荐阅读