javascript - 元素(、)堆叠在手机导航栏下 - react - native

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 属性内的 View 添加样式。查看doc 。如果您传递一个元素，则必须注意它的样式(如果存在嵌套)。

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

....

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