Javascript 垂直对齐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}
    />
  );
}
}

导出默认类设置页面扩展组件{
构造函数（）{
超级（）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
数据源：ds.cloneWithRows([
{
我的名字是：“贝尔”，
标题：“贝尔”
},
{
iconName:'地图标记'，
标题：“地图”
},
]),
};
}
_renderRow（行数据）{
返回(
{rowData.title}
);
}
render（）{
返回(
);
}
}

上述代码生成：

其中组件未对齐

---

我如何解决这个问题？

试试这样的方法：

_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>
  );
}

\u渲染箭头（行数据）{
返回(
{rowData.title}
);
}

---

调整

包装文本元素的弹性值，以获得更符合您喜好的结果。

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