自定义标题不占用堆栈栏中的全部空间答案

【问题标题】：Custom Header don't take full space in stack bar自定义标题不占用堆栈栏中的全部空间
【发布时间】：2020-02-19 21:10:17
【问题描述】：

所以我制作了一个自定义标题组件并尝试将其放在堆栈栏标题中，但是即使将宽度和高度传递到 100%，视图也不会占用全部空间。我也尝试过 flex :1 但那也不行

// header.js
import React from 'react';
import {View,Text,Button,StyleSheet} from 'react-native'
//class Header extends React.Component {
    //render(){
export default function Header(){    
    return (
        <View style={styles.header}>
          <View> 
            <Text style={styles.text}>MEDICLIC</Text>   
          </View>
        </View>
    )
  }


const styles = StyleSheet.create({
  header: {
      width:'100%',
      height:'100%',
      flexDirection:'row',  
      alignItems:'center',
      justifyContent:'center',
      backgroundColor:'#3498db',

    },
  text:{
    fontWeight: '600',
    color:'#ecf0f1',
    fontSize: 32,
  }
});
//export default Header

这是我的 app.js 代码，我还使用了抽屉导航，

// APP.js
import React from 'react';
import Header from './Components/Header'
import { createDrawerNavigator } from 'react-navigation-drawer'
import {createAppContainer } from 'react-navigation'
import {createStackNavigator } from 'react-navigation-stack'
import  ConnectionScreen from './Screens/ConnectionScreen';
import  AccueilScreen from './Screens/AccueilScreen';
import  AboutScreen from './Screens/AboutScreen';
export default class App extends React.Component {
  render(){
    return (
      <AppNavigator/>
        );
  }

}
const AppDrawerNavigator = createDrawerNavigator({
  Accueil:{
    screen: AccueilScreen
  },
  SeConnecter: {
    screen:ConnectionScreen} ,
  Apropos : {
    screen: AboutScreen
  }, 
});
const screens = {
  Accueil:{ 
    screen : AppDrawerNavigator
  },
  SeConnecter: {
    screen:AppDrawerNavigator
  } ,
  Apropos : {
    screen: AppDrawerNavigator
  },  
}
const AppStackNavigator = createStackNavigator(screens,{
  defaultNavigationOptions:{
    headerTitle: () => <Header/>,
    headerTintColor :'#fff',
    headerStyle :{
      backgroundColor:'#fff',
      height: 100,
    },

  }
});
const AppNavigator= createAppContainer(AppStackNavigator);

我在我的安卓设备上看到的

enter image description here

【问题讨论】：

高度怎么样：100vh？
我认为 react native 中没有 100vh 之类的东西，而是“100%”

标签： javascript react-native

【解决方案1】：

     <View style={{  flexDirection: "row", justifyContent: 'center' ,backgroundColor: 'red' ,width:360 }}>

///... 3 views and text in them 

    </View>

我这样做了，使用代替标题将宽度硬编码到组件的主视图。大约宽度 360 取完全宽度，在左右端具有相等的宽度。如果您找到更好的方法来对事物进行分类，请务必提及。提前致谢。

【讨论】：

【解决方案2】：

我今天也遇到了这个问题，但是在寻找解决方案一个多小时后，我终于解决了。问题是 react native 不再允许完全访问标题组件的工作方式，您只能放置您想要的组件，但不能覆盖标题。因此，要根据您的偏好配置堆栈头，您必须从 options 属性中的堆栈 headerStyle 属性配置头。对于我来说，我从堆栈 headerStyle 属性配置背景以填充整个标题，

import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/home";
import ReviewDetails from "../screens/reviewDetails";
import Header from "../shared/header";

const Stack = createStackNavigator();

export default function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          headerTitle: () => <Header />,
          headerStyle: {
            backgroundColor: "coral",
          },
        }}
      />
      <Stack.Screen name="ReviewDetails" component={ReviewDetails} />
    </Stack.Navigator>
  );
}

然后我使用标题组件样式上的绝对位置将其相应地放在中间。注意：百分比仍然不适用于绝对定位，因此您仍然必须使用像素。

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

const Header = () => {
  return (
    <View style={styles.cont}>
      <MaterialIcons name="menu" size={30} />
      <View>
        <Text style={styles.text}>GameZone</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  cont: {
    flex: 1,
    position: "absolute",
    left: 80,
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
  },
  text: {
    fontSize: 24,
    fontFamily: "nunito-bold",
    letterSpacing: 2,
  },
});

export default Header;

这是来自安卓手机的预览 preview of the code

【讨论】：