Skip to main content
Version: 3.x

Taro.setNavigationBarColor(option)

Sets the color of the navigation bar in the page.

Reference

Type

(option: Option) => Promise<CallbackResult>

Parameters

Option

PropertyTypeRequiredDescription
backgroundColorstringYesBackground color value, whose valid value is hexadecimal color
frontColorstringYesForeground color values, including colors of button, title, and status bar; only #ffffff and #000000 are supported.
animationAnimationOptionNoAnimation effects
complete(res: CallbackResult) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: CallbackResult) => voidNoThe callback function for a failed API call
success(res: CallbackResult) => voidNoThe callback function for a successful API call

AnimationOption

object.animation is composed as follows

PropertyTypeRequiredDescription
durationnumberNoAnimation change time (in ms)
timingFunc"linear" | "easeIn" | "easeOut" | "easeInOut"NoAnimation 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

Taro.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ff0000',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})

API Support

APIWeChat Mini-ProgramH5React Native
Taro.setNavigationBarColor✔️✔️✔️(The animation is not supported)