title: Taro.setNavigationBarColor(option)

sidebar_label: setNavigationBarColor

Sets the color of the navigation bar in the page.

Reference

Type

  1. (option: Option) => Promise<CallbackResult>

Parameters

Option

Property Type Required Description
backgroundColor string Yes Background color value, whose valid value is hexadecimal color
frontColor string Yes Foreground color values, including colors of button, title, and status bar; only #ffffff and #000000 are supported.
animation AnimationOption No Animation effects
complete (res: CallbackResult) => void No The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail (res: CallbackResult) => void No The callback function for a failed API call
success (res: CallbackResult) => void No The callback function for a successful API call

AnimationOption

object.animation is composed as follows

Property Type Required Description
duration number No Animation change time (in ms)
timingFunc "linear" | "easeIn" | "easeOut" | "easeInOut" No Animation change mode.

Enum:
- ‘linear’: The animation keeps the same speed from start to end;
- ‘easeIn’: The animation starts at low speed;
- ‘easeOut’: The animation ends at low speed;
- ‘easeInOut’: The animation starts and ends at low speed;

Sample Code

  1. Taro.setNavigationBarColor({
  2.     frontColor: '#ffffff',
  3.     backgroundColor: '#ff0000',
  4.     animation: {
  5.         duration: 400,
  6.         timingFunc: 'easeIn'
  7.     }
  8. })

API Support

API WeChat Mini-Program H5 React Native
Taro.setNavigationBarColor ✔️ ✔️ ✔️(The animation is not supported)