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

【问题标题】：Align vertically Icon and Text in ListView - React Native在 ListView 中垂直对齐图标和文本 - React Native
【发布时间】：2018-06-16 20:45:33
【问题描述】：

我想做一个 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}
    />
  );
}
}

以上代码生成：

其中组件未对齐。

我该如何解决这个问题？

【问题讨论】：

虽然您为图标设置了相同的大小，但根据您的图像，它们的大小并不相同。图标的宽度与其形状有关。

标签： javascript css listview react-native icons

【解决方案1】：

试试这样的：

_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 值，以获得更符合您喜好的结果。

【讨论】：