Как скрыть тень под заголовками реактивной навигации?

Ответ 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
  },
},
})