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>
}

Answer 2

Myabe添加这些样式以查看换行头像和名称吗？

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

alignItems应该在哪里水平对齐，而justifyContent应该在它们垂直居中

Answer 3

也许让您的代码很烂

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

<header>元素（<avatar>，<text>）堆叠在手机导航栏下方-反应-本机

3 个答案: