我正在构建一个电话应用程序,但是最近我遇到了一个问题。我在本节中的元素相互堆叠,并在手机导航屏幕下堆叠。通常,它们应该连续导出,并且应该在中心对齐。我已尝试修复该错误,但直到现在仍未成功。如果有人可以给我一个提示,我将很高兴,我应该如何解决这个问题。

javascript - <Header>元素(<Avatar>,<Text>)被堆叠在手机导航栏下-react-native-LMLPHP

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

....

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


javascript - &lt;Header&gt;元素(&lt;Avatar&gt;,&lt;Text&gt;)被堆叠在手机导航栏下-react-native-LMLPHP

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

最佳答案

在leftComponent属性中向View添加样式。查看doc。如果传递元素,则必须注意是否存在嵌套。

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

....

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

10-06 04:21
查看更多