<Header> элементы (<Avatar>, <Text>) складываются под панелью навигации телефона - реагировать - родной

Question

Я создаю приложение для телефона, но недавно столкнулся с проблемой.Мои элементы в этом разделе складываются друг под другом и под экраном навигации моего телефона.Обычно они должны быть экспортированы в ряд, и они должны быть выровнены по центру.Я пытался исправить ошибку, но безуспешно до сих пор.Я буду рад, если кто-то может подсказать мне, как мне решить эту проблему.

    const styles = StyleSheet.create({
  leftComponentStyle: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

....

leftComponent={
  <View style={styles.leftComponentStyle}>
    ...
  </View>
}

import React , { Component } from 'react';
import { Image , View , Text , TouchableOpacity} from 'react-native';
import { Header , Avatar  } from 'react-native-elements';

import SettingsScreen from './screens/SettingsScreen';
import AppContainer from './navigation/MainTabNavigator';


export default class App extends Component {

  render(){
    return(

        <View style={{ flex:1 }}>
          <Header
            backgroundColor='#e2e2e2'
            placement='left'
          leftComponent={
            <View>
              <Avatar
              rounded
              size='small'
              title='JD'
              activeOpacity={0.7}
              />
              <Text>John Doe.</Text>
            </View>
          }
          rightComponent={
            <Image
              style={{
                width: 80,
                height: 60,
              }}
              source={require=('./assets/images/Shootlog.png')}
            />
          }
           />
           <AppContainer/>
      </View>
    )
  }
}

Answer 1

Добавить стиль для просмотра внутри пропасти leftComponent.Посмотрите на документ .Если вы передаете элемент, вы должны позаботиться о его стиле, если присутствует вложенность.

const styles = StyleSheet.create({
  leftComponentStyle: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

....

leftComponent={
  <View style={styles.leftComponentStyle}>
    ...
  </View>
}

Answer 2

Может сделать свой код как удар

leftComponent={ <View style = {{flexDrection: 'row','justifyContent: 'center', alignItems: 'center'}} > <Avatar rounded size='small' title='JD' activeOpacity={0.7} /> <Text>John Doe.</Text> </View> }

Answer 3

Myabe добавить эти стили для просмотра переноса аватара и имени?

<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }} >

Где alignItems должен выровнять их по горизонтали и выровнять по содержанию, центрировать их по вертикали