feat(NavBar): add safe-area-inset-top prop

src/nav-bar/index.js

@@ -16,6 +16,7 @@ export default createComponent({
     rightText: String,
     leftArrow: Boolean,
     placeholder: Boolean,
+    safeAreaInsetTop: Boolean,
     border: {
       type: Boolean,
       default: true,
@@ -65,17 +66,31 @@ export default createComponent({
         <div
           ref="navBar"
           style={{ zIndex: this.zIndex }}
-          class={[bem({ fixed: this.fixed }), { [BORDER_BOTTOM]: this.border }]}
+          class={[
+            bem({
+              fixed: this.fixed,
+              'safe-area-inset-top': this.safeAreaInsetTop,
+            }),
+            {
+              [BORDER_BOTTOM]: this.border,
+            },
+          ]}
         >
-          {this.hasLeft() && <div class={bem('left')} onClick={this.onClickLeft}>
-            {this.genLeft()}
-          </div>}
-          <div class={[bem('title'), 'van-ellipsis']}>
-            {this.slots('title') || this.title}
+          <div class={bem('content')}>
+            {this.hasLeft() && (
+              <div class={bem('left')} onClick={this.onClickLeft}>
+                {this.genLeft()}
+              </div>
+            )}
+            <div class={[bem('title'), 'van-ellipsis']}>
+              {this.slots('title') || this.title}
+            </div>
+            {this.hasRight() && (
+              <div class={bem('right')} onClick={this.onClickRight}>
+                {this.genRight()}
+              </div>
+            )}
           </div>
-          {this.hasRight() && <div class={bem('right')} onClick={this.onClickRight}>
-            {this.genRight()}
-          </div>}
         </div>
       );
     },