Juster lodret ikon og tekst i ListView – React Native

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.