react-native <视图>中不必要的Div

Question

我正在尝试本机响应，我创建了一个自定义组件。但由于我无法将FLEX css添加到Header组件，因此出现了不必要的div。

标题组件是这样的：

    import React from 'react';
    import {StyleSheet, Text, View } from 'react-native';
    import { MaterialIcons } from '@expo/vector-icons';


    const Header = () => {
        return (
            <View style={styles.header}>
                {/* icon for menu */}
                <MaterialIcons name='menu' size={28}/>
                    <Text style={styles.headerText}>GameZone..</Text>
            </View>
        )
    }

    const styles = StyleSheet.create({
        header: {
            width: '100%',
            height: '100%',
            flexDirection: 'row',
            alignItems: 'center',
            width: '100%',
            backgroundColor: 'red'
        },
        headerText: {

        }
    });    
    export default Header;

这是像这样在Stack内部：'

    const screens = {
    Home: {
        screen: Home,
        navigationOptions: {
            headerTitle: () => <Header />
        }
    },
    ReviewDetails: {
        screen: ReviewDetails,
        navigationOptions: {
            title: 'Review Details'
        }
    }
}

const HomeStack = createStackNavigator(screens, {
    defaultNavigationOptions: {
        headerTintColor: '#444',
        headerStyle: {
            backgroundColor: '#feee',
            height: 81
        }
    }
});

export default HomeStack;