已关闭标题和图像背景之间的空白React-Native答案

【问题标题】：CLOSED White space between header and image background React-Native已关闭标题和图像背景之间的空白React-Native
【发布时间】：2020-01-18 13:19:12
【问题描述】：

我的 react-native 移动应用有一个小问题。

页眉和背景图片之间有一个空格。我怎样才能删除它，比如背景图像在标题旁边？

Image

App.js

import AppNavigator from './navigation/AppNavigator';

import Header from './components/Header';

export default function App(props) {
  const [isLoadingComplete, setLoadingComplete] = useState(false);

  if (!isLoadingComplete && !props.skipLoadingScreen) {
    return (
      <AppLoading
        startAsync={loadResourcesAsync}
        onError={handleLoadingError}
        onFinish={() => handleFinishLoading(setLoadingComplete)}
      />
    );
  } else {
    return (
      <View style={styles.container}>
      <Header title="Header" />
        {Platform.OS === 'ios' && <StatusBar backgroundColor="#C2185B" barStyle="default" />}
        <AppNavigator />

      </View>
    );
  }
}

Header.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Header = props => {
    return (
        <View style={styles.header}>
                <Text style={styles.headerTitle}>MyStadium</Text>
        </View>
    )
};


const styles = StyleSheet.create({
    header: {
        width: '100%',
        height:90,
        backgroundColor: 'black',
        paddingTop: 36,
        alignItems: 'center',
        justifyContent:'center',
    },
    headerTitle: {
        color:'white',
        fontSize: 18
    }
});

export default Header;

AppNavigator 是 tabs pre-config react-native 项目中的基础文件。

感谢您的帮助

【问题讨论】：

给flex:1的图像样式或尝试给它宽度和高度

标签： reactjs react-native

【解决方案1】：

从容器样式中移除 paddingTop: 36 如下所示

const styles = StyleSheet.create({
    header: {
        width: '100%',
        height: 90,
        backgroundColor: 'black',
        alignItems: 'center',
        justifyContent:'center',
    },
    headerTitle: {
        color:'white',
        fontSize: 18
    }
});

【讨论】：

【解决方案2】：

好的，我知道了！

只需删除我的 Header.js 并像这样使用 de navigationOptions

HomeScreen.navigationOptions = {
  title: 'MyStadium',
  headerStyle: {
    backgroundColor: 'black'
  },
  headerTintColor: 'white',
  headerTitleStyle: {
    fontWeight: 'bold'
  }
};

【讨论】：