marginTop的值为30，这对headerStyle没有影响

Question

defaultNavigationOptions:{
headerStyle:{
backgroundColor: Platform.OS === 'android' ? Colors.blue10: '',
marginTop:30,
},
}

我希望我的标题尊重这个边距但是它发出警告说"margin被赋予了30的值，这对headerStyle没有影响。

Answer 1

对于我来说(react-navigation v5)是我的screenOptions(在react-navigation v4中称为defaultNavigationOptions)对象使用headerTitle属性。所以我把我的改成了:

{
headerStyle: {
backgroundColor: COLORS.primary.main,
marginTop: Constants.statusBarHeight // <-- This here had no effect
},
headerTintColor: '#FFFFFF',
headerTitle: ({ children }) => {
const title = children.name;
return (
<ThisIsMyCustomHeader
title={title}
navigate={navigation.navigate}
/>
);
}
}

转换成:

{
header: ({ children }) => {
const title = children.name;
return (
<ThisIsMyCustomHeader
title={title}
navigate={navigation.navigate}
/>
);
}
}

因此将headerTitle更改为header并移动ThisIsMyCustomHeader组件内的所有样式。也许能帮到别人。

Answer 2

你可以创建一个自定义的标题，并在那里给出样式。如果这也不起作用，请尝试在顶部添加height:30和backgroundColor: 'transparent'的视图。它将给出相同的结果。