Как скрыть тень под заголовками реактивной навигации?
Они выглядят так.
Как скрыть тень под заголовками реактивной навигации?
Ответ 1
Добавьте следующее в стиль заголовка navigationOptions.
const AppNavigation = StackNavigator(
{
'The First Screen!': { screen: FirstScreen },
},
{
navigationOptions: {
header: {
style: {
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS
},
},
},
},
);
Документация пока невелика, но вы можете узнать о навигационных параметрах в React Navigation Docs.
Ответ 2
Следующее работает для меня, так как оригинальная таблица стилей использует "borderBottomWidth" на iOS:
const navigator = StackNavigator(screens, {
navigationOptions: {
headerStyle: {
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
}
}
});
Ответ 3
Это работает для меня:
export const AppNavigator = StackNavigator(
{
Login: { screen: LoginScreen },
Main: { screen: MainScreen },
Profile: { screen: ProfileScreen },
},
navigationOptions: {
headerStyle: {
elevation: 0,
shadowOpacity: 0,
}
}
);
или
export const AppNavigator = StackNavigator(
{
Login: { screen: LoginScreen },
Main: { screen: MainScreen },
Profile: { screen: ProfileScreen },
},
header: {
style: {
elevation: 0, //remove shadow on Android
shadowOpacity: 0, //remove shadow on iOS
}
}
);
Ответ 4
Попробуйте пропустить cardStyle: { shadowColor: 'transparent' }
export const AppNavigator = StackNavigator(
{
Login: { screen: LoginScreen },
Main: { screen: MainScreen },
Profile: { screen: ProfileScreen },
},
cardStyle: { shadowColor: 'transparent' }
В соответствии с этим вопросом Настройте стиль теневого стиля Navigator Navic Navigator
Ответ 5
Вы можете попробовать это, и это сработало для меня!
export const SignedOut = StackNavigator({
SignIn: {
screen: SignInScreen,
navigationOptions: {
title: "SignIn",
headerStyle: {
shadowOpacity: 0, // This is for ios
elevation: 0 // This is for android
}
}
}
});
Ответ 6
Последние пару часов я пытался решить эту проблему и наконец нашел решение. Проблема в моем случае заключалась в том, что заголовок находился в отличной от Z позиции, чем остальные компоненты.
пытаться:
const styles = {
headerStyle: {
zIndex: 1
}
}
Ответ 7
Тень достигается путем возвышения, используйте:
headerStyle: {
backgroundColor: 'white',
shadowColor: 'transparent',
elevation: 0,
},
Ответ 8
По состоянию на 2019 г. этот ответ не работает в версии 3.
Новый способ сделать это:
const AppNavigation = StackNavigator(
{
'The First Screen!': { screen: FirstScreen },
},
{
defaultNavigationOptions: {
headerStyle: {
elevation: 0,
shadowOpacity: 0,
},
},
},
);
Ответ 9
Я не знаю, сколько будет стоить этот ответ, но делюсь своим кодом, чтобы вы знали, что это работает для меня для версии реакции-навигации: 3.9.1
const AppNavigation = StackNavigator(
{
FirstScreen,
},
{
defaultNavigationOptions: {
headerStyle: {
elevation: 0, //for android
shadowOpacity: 0, //for ios
borderBottomWidth: 0, //for ios
},
},
})