Taro.setNavigationBarColor(option)
Sets the color of the navigation bar in the page.
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) |