Taro.setNavigationBarColor(option)

Sets the color of the navigation bar in the page.

Reference

Type

(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

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

API Support

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