[英]Align vertically Icon and Text in 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}
/>
);
}
}
上面的代码生成:
其中组件未对齐。
我该如何解决这个问题?
尝试这样的事情:
_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 值,以获得更符合您喜好的结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.