Jeg vil lave en ListView, og hver række skal indeholde et ikon og en tekst. Men jeg har brug for, at de er lodret justeret.
Koden:
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} /> ); } }
Ovenstående kode genererer:
hvor komponenterne ikke er justeret.
Hvordan kan jeg løse dette?
Svar
Prøv noget som dette:
_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> ); }
Juster flexværdien for <View>
indpakning af tekstelementet for et resultat, der er mere til din smag.