Merge branch 'feature/dev' into 'master'

Feature/dev



See merge request !27

Android/doric/src/main/AndroidManifest.xml

@@ -4,7 +4,9 @@
     <uses-permission android:name="android.permission.CAMERA" />
 
     <application>
-        <activity android:name="pub.doric.DoricActivity">
+        <activity
+            android:name="pub.doric.DoricActivity"
+            android:theme="@style/Theme.Design.Light.NoActionBar">
             <intent-filter>
                 <action android:name="android.intent.action.VIEW" />
 

Android/doric/src/main/java/pub/doric/DoricContext.java

@@ -26,6 +26,7 @@ import java.util.HashMap;
 import java.util.Map;
 
 import pub.doric.async.AsyncResult;
+import pub.doric.navbar.IDoricNavBar;
 import pub.doric.navigator.IDoricNavigator;
 import pub.doric.plugin.DoricJavaPlugin;
 import pub.doric.shader.RootNode;
@@ -159,4 +160,14 @@ public class DoricContext {
     public IDoricNavigator getDoricNavigator() {
         return this.doricNavigator;
     }
+
+    private IDoricNavBar doricNavBar;
+
+    public void setDoricNavBar(IDoricNavBar navBar) {
+        this.doricNavBar = navBar;
+    }
+
+    public IDoricNavBar getDoricNavBar() {
+        return this.doricNavBar;
+    }
 }

Android/doric/src/main/java/pub/doric/DoricPanelFragment.java

@@ -26,6 +26,7 @@ import androidx.fragment.app.Fragment;
 
 import pub.doric.async.AsyncResult;
 import pub.doric.loader.DoricJSLoaderManager;
+import pub.doric.navbar.BaseDoricNavBar;
 import pub.doric.navigator.IDoricNavigator;
 import pub.doric.utils.DoricLog;
 
@@ -36,6 +37,7 @@ import pub.doric.utils.DoricLog;
  */
 public class DoricPanelFragment extends Fragment {
     private DoricPanel doricPanel;
+    private BaseDoricNavBar navBar;
 
     public static DoricPanelFragment newInstance(String scheme, String alias) {
         Bundle args = new Bundle();
@@ -48,14 +50,15 @@ public class DoricPanelFragment extends Fragment {
 
     @Override
     public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
-        doricPanel = (DoricPanel) inflater.inflate(R.layout.doric_framgent_panel, container, false);
+        return inflater.inflate(R.layout.doric_framgent_panel, container, false);
-        return doricPanel;
     }
 
 
     @Override
     public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
         super.onViewCreated(view, savedInstanceState);
+        doricPanel = view.findViewById(R.id.doric_panel);
+        navBar = view.findViewById(R.id.doric_nav_bar);
         Bundle argument = getArguments();
         if (argument == null) {
             DoricLog.e("DoricPanelFragment argument is null");
@@ -72,6 +75,7 @@ public class DoricPanelFragment extends Fragment {
                 if (fragment instanceof IDoricNavigator) {
                     context.setDoricNavigator((IDoricNavigator) fragment);
                 }
+                context.setDoricNavBar(navBar);
             }
 
             @Override

Android/doric/src/main/java/pub/doric/DoricRegistry.java

@@ -20,6 +20,7 @@ import android.text.TextUtils;
 import pub.doric.loader.DoricAssetJSLoader;
 import pub.doric.loader.DoricHttpJSLoader;
 import pub.doric.loader.IDoricJSLoader;
+import pub.doric.plugin.NavBarPlugin;
 import pub.doric.plugin.NavigatorPlugin;
 import pub.doric.plugin.NetworkPlugin;
 import pub.doric.plugin.ShaderPlugin;
@@ -82,6 +83,8 @@ public class DoricRegistry {
         this.registerNativePlugin(NetworkPlugin.class);
         this.registerNativePlugin(StoragePlugin.class);
         this.registerNativePlugin(NavigatorPlugin.class);
+        this.registerNativePlugin(NavBarPlugin.class);
+
         this.registerViewNode(RootNode.class);
         this.registerViewNode(TextNode.class);
         this.registerViewNode(ImageNode.class);

Android/doric/src/main/java/pub/doric/navbar/BaseDoricNavBar.java

@@ -0,0 +1,105 @@
+package pub.doric.navbar;
+
+import android.app.Activity;
+import android.content.Context;
+import android.text.Layout;
+import android.text.StaticLayout;
+import android.util.AttributeSet;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+import android.widget.TextView;
+
+import androidx.annotation.AttrRes;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import pub.doric.R;
+
+/**
+ * @Description: pub.doric.navbar
+ * @Author: pengfei.zhou
+ * @CreateDate: 2019-11-25
+ */
+public class BaseDoricNavBar extends FrameLayout implements IDoricNavBar {
+    private ViewGroup mTitleContainer;
+    private ViewGroup mRightContainer;
+    private ViewGroup mLeftContainer;
+    private TextView mTvTitle;
+
+    public BaseDoricNavBar(@NonNull Context context) {
+        this(context, null);
+    }
+
+    public BaseDoricNavBar(@NonNull Context context, @Nullable AttributeSet attrs) {
+        this(context, attrs, 0);
+    }
+
+    public BaseDoricNavBar(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+        setup();
+    }
+
+    private void setup() {
+        LayoutInflater.from(getContext()).inflate(R.layout.doric_navigator, this);
+        mTitleContainer = findViewById(R.id.container_title);
+        mLeftContainer = findViewById(R.id.container_left);
+        mRightContainer = findViewById(R.id.container_right);
+        mTvTitle = findViewById(R.id.tv_title);
+        findViewById(R.id.tv_back).setOnClickListener(new OnClickListener() {
+            @Override
+            public void onClick(View v) {
+                if (getContext() instanceof Activity) {
+                    ((Activity) getContext()).onBackPressed();
+                }
+            }
+        });
+    }
+
+    @Override
+    public boolean isHidden() {
+        return getVisibility() != VISIBLE;
+    }
+
+    @Override
+    public void setHidden(boolean b) {
+        setVisibility(b ? GONE : VISIBLE);
+    }
+
+    @Override
+    public void setTitle(String title) {
+        mTvTitle.setText(title);
+    }
+
+    private void updateTitleMargins() {
+        try {
+            int width = mRightContainer.getRight() - mLeftContainer.getLeft();
+            int leftWidth = mLeftContainer.getWidth();
+            int rightWidth = mRightContainer.getWidth();
+            int margin = Math.max(leftWidth, rightWidth);
+            if (leftWidth + rightWidth > width) {
+                mTitleContainer.setVisibility(GONE);
+            } else {
+                mTitleContainer.setVisibility(VISIBLE);
+                StaticLayout staticLayout = new StaticLayout(mTvTitle.getText(),
+                        mTvTitle.getPaint(), Integer.MAX_VALUE, Layout.Alignment.ALIGN_NORMAL,
+                        1.0f, 0.0f, false);
+                float textWidth = (staticLayout.getLineCount() > 0 ? staticLayout.getLineWidth(0) : 0.0f);
+                if (width - 2 * margin >= textWidth) {
+                    mTitleContainer.setPadding(margin, 0, margin, 0);
+                } else {
+                    mTitleContainer.setPadding(leftWidth, 0, rightWidth, 0);
+                }
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+
+    @Override
+    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
+        super.onLayout(changed, left, top, right, bottom);
+        updateTitleMargins();
+    }
+}

Android/doric/src/main/java/pub/doric/navbar/IDoricNavBar.java

@@ -0,0 +1,31 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package pub.doric.navbar;
+
+/**
+ * @Description: pub.doric.navbar
+ * @Author: pengfei.zhou
+ * @CreateDate: 2019-11-25
+ */
+public interface IDoricNavBar {
+    boolean isHidden();
+
+    void setHidden(boolean hidden);
+
+    void setTitle(String title);
+
+    void setBackgroundColor(int color);
+}

Android/doric/src/main/java/pub/doric/plugin/NavBarPlugin.java

@@ -0,0 +1,115 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package pub.doric.plugin;
+
+import android.view.View;
+import android.view.ViewGroup;
+
+import com.github.pengfeizhou.jscore.ArchiveException;
+import com.github.pengfeizhou.jscore.JSDecoder;
+import com.github.pengfeizhou.jscore.JSObject;
+import com.github.pengfeizhou.jscore.JavaValue;
+
+import pub.doric.DoricContext;
+import pub.doric.extension.bridge.DoricMethod;
+import pub.doric.extension.bridge.DoricPlugin;
+import pub.doric.extension.bridge.DoricPromise;
+import pub.doric.navbar.IDoricNavBar;
+import pub.doric.utils.DoricUtils;
+import pub.doric.utils.ThreadMode;
+
+/**
+ * @Description: pub.doric.plugin
+ * @Author: pengfei.zhou
+ * @CreateDate: 2019-11-25
+ */
+@DoricPlugin(name = "navbar")
+public class NavBarPlugin extends DoricJavaPlugin {
+    public NavBarPlugin(DoricContext doricContext) {
+        super(doricContext);
+    }
+
+    @DoricMethod(thread = ThreadMode.UI)
+    public void isHidden(DoricPromise promise) {
+        IDoricNavBar navBar = getDoricContext().getDoricNavBar();
+        if (navBar == null) {
+            promise.reject(new JavaValue("Not implement NavBar"));
+        } else {
+            promise.resolve(new JavaValue(navBar.isHidden()));
+        }
+    }
+
+    @DoricMethod(thread = ThreadMode.UI)
+    public void setHidden(JSDecoder jsDecoder, DoricPromise promise) {
+        IDoricNavBar navBar = getDoricContext().getDoricNavBar();
+        if (navBar == null) {
+            promise.reject(new JavaValue("Not implement NavBar"));
+        } else {
+            try {
+                JSObject jsObject = jsDecoder.decode().asObject();
+                boolean hidden = jsObject.getProperty("hidden").asBoolean().value();
+                navBar.setHidden(hidden);
+                View v = getDoricContext().getRootNode().getDoricLayer();
+                ViewGroup.LayoutParams params = v.getLayoutParams();
+                if (params instanceof ViewGroup.MarginLayoutParams) {
+                    ((ViewGroup.MarginLayoutParams) params).topMargin =
+                            hidden ? 0
+                                    : ((View) navBar).getMeasuredHeight();
+                }
+                promise.resolve();
+            } catch (ArchiveException e) {
+                e.printStackTrace();
+                promise.reject(new JavaValue(e.getLocalizedMessage()));
+            }
+        }
+    }
+
+    @DoricMethod(thread = ThreadMode.UI)
+    public void setTitle(JSDecoder jsDecoder, DoricPromise promise) {
+        IDoricNavBar navBar = getDoricContext().getDoricNavBar();
+        if (navBar == null) {
+            promise.reject(new JavaValue("Not implement NavBar"));
+        } else {
+            try {
+                JSObject jsObject = jsDecoder.decode().asObject();
+                String title = jsObject.getProperty("title").asString().value();
+                navBar.setTitle(title);
+                promise.resolve();
+            } catch (ArchiveException e) {
+                e.printStackTrace();
+                promise.reject(new JavaValue(e.getLocalizedMessage()));
+            }
+        }
+    }
+
+    @DoricMethod(thread = ThreadMode.UI)
+    public void setBgColor(JSDecoder jsDecoder, DoricPromise promise) {
+        IDoricNavBar navBar = getDoricContext().getDoricNavBar();
+        if (navBar == null) {
+            promise.reject(new JavaValue("Not implement NavBar"));
+        } else {
+            try {
+                JSObject jsObject = jsDecoder.decode().asObject();
+                int color = jsObject.getProperty("color").asNumber().toInt();
+                navBar.setBackgroundColor(color);
+                promise.resolve();
+            } catch (ArchiveException e) {
+                e.printStackTrace();
+                promise.reject(new JavaValue(e.getLocalizedMessage()));
+            }
+        }
+    }
+}

Android/doric/src/main/java/pub/doric/plugin/ShaderPlugin.java

@@ -56,6 +56,7 @@ public class ShaderPlugin extends DoricJavaPlugin {
                 @Override
                 public Object call() throws Exception {
                     RootNode rootNode = getDoricContext().getRootNode();
+                    rootNode.setId(jsObject.getProperty("id").asString().value());
                     rootNode.render(jsObject.getProperty("props").asObject());
                     return null;
                 }

Android/doric/src/main/java/pub/doric/shader/ViewNode.java

@@ -187,7 +187,7 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
         do {
             ids.push(viewNode.mId);
             viewNode = viewNode.mSuperNode;
-        } while (viewNode != null && !(viewNode instanceof RootNode));
+        } while (viewNode != null);
 
         return ids.toArray(new String[0]);
     }

Android/doric/src/main/res/layout/doric_framgent_panel.xml

@@ -1,5 +1,18 @@
 <?xml version="1.0" encoding="utf-8"?>
-<pub.doric.DoricPanel xmlns:android="http://schemas.android.com/apk/res/android"
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
+    android:layout_height="match_parent">
-    android:background="#ffffff" />
+
+    <pub.doric.DoricPanel
+        android:id="@+id/doric_panel"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:background="#ffffff"
+        android:layout_marginTop="44dp" />
+
+    <pub.doric.navbar.BaseDoricNavBar
+        android:id="@+id/doric_nav_bar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content" />
+
+</FrameLayout>

Android/doric/src/main/res/layout/doric_navigator.xml

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<merge xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <FrameLayout
+        android:id="@+id/nav_layout"
+        android:layout_width="match_parent"
+        android:layout_height="44dp"
+        android:gravity="center_vertical"
+        android:orientation="horizontal"
+        android:paddingLeft="15dp"
+        android:paddingRight="15dp">
+
+        <FrameLayout
+            android:id="@+id/container_title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center"
+            android:gravity="center">
+
+            <TextView
+                android:id="@+id/tv_title"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:ellipsize="end"
+                android:singleLine="true"
+                android:textSize="16sp">
+
+            </TextView>
+        </FrameLayout>
+
+        <LinearLayout
+            android:id="@+id/container_left"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_gravity="center_vertical|left"
+            android:gravity="center"
+            android:orientation="horizontal">
+
+            <TextView
+                android:id="@+id/tv_back"
+                android:layout_width="wrap_content"
+                android:layout_height="match_parent"
+                android:drawableLeft="@drawable/doric_icon_back"
+                android:minWidth="30dp"
+                android:textColor="#000"
+                android:textSize="16sp" />
+
+        </LinearLayout>
+
+        <LinearLayout
+            android:id="@+id/container_right"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_gravity="center_vertical|right"
+            android:gravity="center"
+            android:orientation="horizontal" />
+
+    </FrameLayout>
+
+</merge>

demo/index.ts

@@ -11,4 +11,5 @@ export default [
     'src/NetworkDemo',
     'src/StorageDemo',
     'src/NavigatorDemo',
+    'src/NavbarDemo',
 ]

demo/src/NavbarDemo.ts

@@ -0,0 +1,84 @@
+import { Group, Panel, navbar, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network, navigator } from "doric";
+import { title, label, colors } from "./utils";
+
+@Entry
+class NavbarDemo extends Panel {
+    build(rootView: Group): void {
+        scroller(vlayout([
+            title("Navbar Demo"),
+            label('isHidden').apply({
+                width: 200,
+                height: 50,
+                bgColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().exactly(),
+                onClick: () => {
+                    navbar(context).isHidden().then(e => modal(context).alert(`Navbar isHidden:${e}`)).catch(e => {
+                        modal(context).alert(e)
+                    })
+                }
+            } as IText),
+            label('setHidden').apply({
+                width: 200,
+                height: 50,
+                bgColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().exactly(),
+                onClick: () => {
+                    navbar(context).isHidden()
+                        .then(e => navbar(context).setHidden(!e))
+                        .catch(e => {
+                            modal(context).alert(e)
+                        })
+                }
+            } as IText),
+            label('setTitle').apply({
+                width: 200,
+                height: 50,
+                bgColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().exactly(),
+                onClick: () => {
+                    navbar(context).setTitle('Setted Title')
+                        .catch(e => {
+                            modal(context).alert(e)
+                        })
+                }
+            } as IText),
+            label('setBgColor').apply({
+                width: 200,
+                height: 50,
+                bgColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().exactly(),
+                onClick: () => {
+                    navbar(context).setBgColor(Color.YELLOW)
+                        .catch(e => {
+                            modal(context).alert(e)
+                        })
+                }
+            } as IText),
+            label('Pop').apply({
+                width: 200,
+                height: 50,
+                bgColor: colors[0],
+                textSize: 30,
+                textColor: Color.WHITE,
+                layoutConfig: layoutConfig().exactly(),
+                onClick: () => {
+                    navigator(context).pop()
+                }
+            } as IText),
+        ]).apply({
+            layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
+            gravity: gravity().center(),
+            space: 10,
+        } as IVLayout)).apply({
+            layoutConfig: layoutConfig().atmost(),
+        }).in(rootView)
+    }
+}

demo/src/NavigatorDemo.ts

@@ -13,7 +13,9 @@ class NaivgatorDemo extends Panel {
                 textAlignment: gravity().center(),
                 height: 50,
             }),
-            ...['Counter', 'EffectsDemo', 'ImageDemo', 'LayoutDemo',
+            ...[
+                'NavbarDemo',
+                'Counter', 'EffectsDemo', 'ImageDemo', 'LayoutDemo',
                 'ListDemo', 'ModalDemo', 'NavigatorDemo',
                 'NetworkDemo', 'ScrollerDemo', 'SliderDemo', 'Snake', 'StorageDemo'].map(e =>
                     label(e).apply({

iOS/Example/Example/QRScanViewController.m

@@ -86,7 +86,7 @@ - (void)captureOutput:(AVCaptureOutput *)captureOutput didOutputMetadataObjects:
         NSString *result = qrObject.stringValue;
         NSLog(@"Scan result is %@", result);
         [[DoricDriver instance] connectDevKit:[NSString stringWithFormat:@"ws://%@:7777", result]];
-        showToast([NSString stringWithFormat:@"Connected to %@", result], BOTTOM);
+        ShowToast([NSString stringWithFormat:@"Connected to %@", result], BOTTOM);
         [self.navigationController popViewControllerAnimated:NO];
     }
 }

iOS/Pod/Classes/Doric.h

@@ -22,6 +22,6 @@
 #import "DoricUtil.h"
 #import "DoricPanel.h"
 #import "DoricJSLoaderManager.h"
-#import "DoricNavigatorProtocol.h"
+#import "DoricNavigatorDelegate.h"
+#import "DoricNavBarDelegate.h"
 #import "DoricViewController.h"
-#import "DoricDefaultNavigator.h"

iOS/Pod/Classes/DoricContext.h

@@ -22,14 +22,16 @@
 
 #import <Foundation/Foundation.h>
 #import "DoricDriver.h"
-#import "DoricNavigatorProtocol.h"
+#import "DoricNavigatorDelegate.h"
+#import "DoricNavBarDelegate.h"
 
 NS_ASSUME_NONNULL_BEGIN
 
 @class DoricRootNode;
 
 @interface DoricContext : NSObject
-@property(nonatomic, strong) id <DoricNavigatorProtocol> navigator;
+@property(nonatomic, weak) id <DoricNavigatorDelegate> navigator;
+@property(nonatomic, weak) id <DoricNavBarDelegate> navBar;
 @property(nonatomic, strong) NSString *contextId;
 @property(nonatomic, strong) DoricDriver *driver;
 @property(nonatomic, strong) NSMutableDictionary *pluginInstanceMap;

iOS/Pod/Classes/DoricPanel.h

@@ -20,7 +20,7 @@
 #import <Foundation/Foundation.h>
 
 #import "DoricContext.h"
-#import "DoricNavigatorProtocol.h"
+#import "DoricNavigatorDelegate.h"
 
 @interface DoricPanel : UIViewController
 @property(nonatomic, strong) DoricContext *doricContext;

iOS/Pod/Classes/DoricPanel.m

@@ -24,13 +24,20 @@ @implementation DoricPanel
 
 - (void)config:(NSString *)script alias:(NSString *)alias {
     self.doricContext = [[[DoricContext alloc] initWithScript:script source:alias] also:^(DoricContext *it) {
-        it.navigator = [[DoricDefaultNavigator alloc] initWithNavigationController:self.navigationController];
         [it.rootNode setupRootView:[[DoricStackView new] also:^(DoricStackView *it) {
-            it.width = self.view.width;
-            it.height = self.view.height;
             [self.view addSubview:it];
         }]];
-        [it initContextWithWidth:self.view.width height:self.view.height];
+    }];
+}
+
+- (void)viewWillLayoutSubviews {
+    [super viewWillLayoutSubviews];
+    [self.doricContext.rootNode.view also:^(DoricStackView *it) {
+        if (it.width != self.view.width || it.height != self.view.height) {
+            it.width = self.view.width;
+            it.height = self.view.height;
+            [self.doricContext initContextWithWidth:it.width height:it.height];
+        }
     }];
 }
 

iOS/Pod/Classes/DoricRegistry.m

@@ -36,6 +36,7 @@
 #import "DoricSlideItemNode.h"
 #import "DoricStoragePlugin.h"
 #import "DoricNavigatorPlugin.h"
+#import "DoricNavBarPlugin.h"
 
 @interface DoricRegistry ()
 
@@ -63,6 +64,7 @@ - (void)innerRegister {
     [self registerNativePlugin:DoricNetworkPlugin.class withName:@"network"];
     [self registerNativePlugin:DoricStoragePlugin.class withName:@"storage"];
     [self registerNativePlugin:DoricNavigatorPlugin.class withName:@"navigator"];
+    [self registerNativePlugin:DoricNavBarPlugin.class withName:@"navbar"];
 
     [self registerViewNode:DoricStackNode.class withName:@"Stack"];
     [self registerViewNode:DoricVLayoutNode.class withName:@"VLayout"];

iOS/Pod/Classes/DoricViewController.h

@@ -18,8 +18,9 @@
 //
 
 #import <Foundation/Foundation.h>
-#import "DoricNavigatorProtocol.h"
+#import "DoricNavigatorDelegate.h"
+#import "DoricNavBarDelegate.h"
 
-@interface DoricViewController : UIViewController
+@interface DoricViewController : UIViewController <DoricNavigatorDelegate, DoricNavBarDelegate>
 - (instancetype)initWithScheme:(NSString *)scheme alias:(NSString *)alias;
 @end

iOS/Pod/Classes/DoricViewController.m

@@ -23,10 +23,18 @@
 #import "DoricPanel.h"
 #import "UIView+Doric.h"
 #import "DoricExtensions.h"
+#import "DoricUtil.h"
+
+@interface DoricViewController ()
+@property(nonatomic, strong) DoricPanel *doricPanel;
+@property(nonatomic) BOOL navBarHidden;
+@property(nonatomic, strong) UIImage *navBarImage;
+@end
 
 @implementation DoricViewController
 - (instancetype)initWithScheme:(NSString *)scheme alias:(NSString *)alias {
     if (self = [super init]) {
+        self.edgesForExtendedLayout = UIRectEdgeNone;
         DoricAsyncResult <NSString *> *result = [DoricJSLoaderManager.instance request:scheme];
         result.resultCallback = ^(NSString *result) {
             dispatch_async(dispatch_get_main_queue(), ^{
@@ -34,16 +42,66 @@ - (instancetype)initWithScheme:(NSString *)scheme alias:(NSString *)alias {
                 [panel.view also:^(UIView *it) {
                     it.backgroundColor = [UIColor whiteColor];
                     it.width = self.view.width;
-                    it.height = self.view.height - 88;
+                    it.height = self.view.height;
-                    it.top = 88;
                 }];
                 [self.view addSubview:panel.view];
                 [self addChildViewController:panel];
                 [panel config:result alias:alias];
-
+                panel.doricContext.navigator = self;
+                panel.doricContext.navBar = self;
+                self.doricPanel = panel;
             });
         };
     }
     return self;
 }
+
+- (void)viewWillAppear:(BOOL)animated {
+    [super viewWillAppear:animated];
+    self.navBarHidden = self.navigationController.navigationBarHidden;
+    self.navBarImage = [self.navigationController.navigationBar backgroundImageForBarMetrics:UIBarMetricsDefault];
+}
+
+- (void)viewWillDisappear:(BOOL)animated {
+    [super viewWillDisappear:animated];
+    if (self.navigationController.navigationBarHidden != self.navBarHidden) {
+        [self.navigationController setNavigationBarHidden:self.navBarHidden];
+    }
+    if (self.navBarImage != [self.navigationController.navigationBar backgroundImageForBarMetrics:UIBarMetricsDefault]) {
+        [self.navigationController.navigationBar setBackgroundImage:self.navBarImage forBarMetrics:UIBarMetricsDefault];
+    }
+}
+
+- (void)viewWillLayoutSubviews {
+    [super viewWillLayoutSubviews];
+    self.doricPanel.view.width = self.view.width;
+    self.doricPanel.view.height = self.view.height;
+}
+
+- (void)doric_navigator_push:(NSString *)scheme alias:(NSString *)alias animated:(BOOL)animated {
+    DoricViewController *viewController = [[DoricViewController alloc] initWithScheme:scheme alias:alias];
+    [self.navigationController pushViewController:viewController animated:animated];
+}
+
+- (void)doric_navigator_pop:(BOOL)animated {
+    [self.navigationController popViewControllerAnimated:animated];
+}
+
+- (BOOL)doric_navBar_isHidden {
+    return self.navigationController.navigationBarHidden;
+}
+
+- (void)doric_navBar_setHidden:(BOOL)hidden {
+    [self.navigationController setNavigationBarHidden:hidden];
+}
+
+- (void)doric_navBar_setTitle:(NSString *)title {
+    self.title = title;
+}
+
+- (void)doric_navBar_setBackgroundColor:(UIColor *)color {
+    [self.navigationController.navigationBar setBackgroundImage:UIImageWithColor(color) forBarMetrics:UIBarMetricsDefault];
+}
+
+
 @end

iOS/Pod/Classes/NavBar/DoricNavBarDelegate.h

@@ -0,0 +1,31 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//
+// Created by pengfei.zhou on 2019/11/25.
+//
+
+#import <Foundation/Foundation.h>
+
+
+@protocol DoricNavBarDelegate <NSObject>
+- (BOOL)doric_navBar_isHidden;
+
+- (void)doric_navBar_setHidden:(BOOL)hidden;
+
+- (void)doric_navBar_setTitle:(NSString *)title;
+
+- (void)doric_navBar_setBackgroundColor:(UIColor *)color;
+@end

iOS/Pod/Classes/Navigator/DoricDefaultNavigator.h

@@ -1,10 +0,0 @@
-//
-// Created by pengfei.zhou on 2019/11/25.
-//
-
-#import <Foundation/Foundation.h>
-#import "DoricNavigatorProtocol.h"
-
-@interface DoricDefaultNavigator : NSObject <DoricNavigatorProtocol>
-- (instancetype)initWithNavigationController:(UINavigationController *)navigationController;
-@end

iOS/Pod/Classes/Navigator/DoricDefaultNavigator.m

@@ -1,29 +0,0 @@
-//
-// Created by pengfei.zhou on 2019/11/25.
-//
-
-#import "DoricDefaultNavigator.h"
-#import "DoricViewController.h"
-
-@interface DoricDefaultNavigator ()
-@property(nonatomic, weak) UINavigationController *navigationController;
-@end
-
-@implementation DoricDefaultNavigator
-- (instancetype)initWithNavigationController:(UINavigationController *)navigationController {
-    if (self = [super init]) {
-        _navigationController = navigationController;
-    }
-    return self;
-}
-
-- (void)push:(NSString *)scheme alias:(NSString *)alias animated:(BOOL)animated {
-    DoricViewController *viewController = [[DoricViewController alloc] initWithScheme:scheme alias:alias];
-    [self.navigationController pushViewController:viewController animated:animated];
-}
-
-- (void)pop:(BOOL)animated {
-    [self.navigationController popViewControllerAnimated:animated];
-}
-
-@end

iOS/Pod/Classes/Navigator/DoricNavigatorDelegate.h

@@ -0,0 +1,26 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//
+// Created by pengfei.zhou on 2019/11/23.
+//
+
+#import <Foundation/Foundation.h>
+
+@protocol DoricNavigatorDelegate <NSObject>
+- (void)doric_navigator_push:(NSString *)scheme alias:(NSString *)alias animated:(BOOL)animated;
+
+- (void)doric_navigator_pop:(BOOL)animated;
+@end

iOS/Pod/Classes/Navigator/DoricNavigatorProtocol.h

@@ -1,11 +0,0 @@
-//
-// Created by pengfei.zhou on 2019/11/23.
-//
-
-#import <Foundation/Foundation.h>
-
-@protocol DoricNavigatorProtocol <NSObject>
-- (void)push:(NSString *)scheme alias:(NSString *)alias animated:(BOOL)animated;
-
-- (void)pop:(BOOL)animated;
-@end

iOS/Pod/Classes/Plugin/DoricModalPlugin.m

@@ -32,7 +32,7 @@ - (void)toast:(NSDictionary *)dic withPromise:(DoricPromise *)promise {
         [dic[@"gravity"] also:^(NSNumber *it) {
             gravity = (DoricGravity) [it integerValue];
         }];
-        showToast(dic[@"msg"], gravity);
+        ShowToast(dic[@"msg"], gravity);
     });
 }
 

iOS/Pod/Classes/Plugin/DoricNavBarPlugin.h

@@ -0,0 +1,26 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//
+// Created by pengfei.zhou on 2019/11/25.
+//
+
+#import <Foundation/Foundation.h>
+
+#import "DoricNativePlugin.h"
+
+@interface DoricNavBarPlugin : DoricNativePlugin
+
+@end

iOS/Pod/Classes/Plugin/DoricNavBarPlugin.m

@@ -0,0 +1,68 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//
+// Created by pengfei.zhou on 2019/11/25.
+//
+
+#import "DoricNavBarPlugin.h"
+#import "DoricUtil.h"
+
+@implementation DoricNavBarPlugin
+- (void)isHidden:(NSDictionary *)param withPromise:(DoricPromise *)promise {
+    if (self.doricContext.navBar) {
+        dispatch_async(dispatch_get_main_queue(), ^{
+            [promise resolve:@([self.doricContext.navBar doric_navBar_isHidden])];
+        });
+    } else {
+        [promise reject:@"Not implement NavBar"];
+    }
+}
+
+- (void)setHidden:(NSDictionary *)param withPromise:(DoricPromise *)promise {
+    if (self.doricContext.navBar) {
+        dispatch_async(dispatch_get_main_queue(), ^{
+            [self.doricContext.navBar doric_navBar_setHidden:[param[@"hidden"] boolValue]];
+            [promise resolve:nil];
+        });
+    } else {
+        [promise reject:@"Not implement NavBar"];
+    }
+}
+
+- (void)setTitle:(NSDictionary *)param withPromise:(DoricPromise *)promise {
+    if (self.doricContext.navBar) {
+        dispatch_async(dispatch_get_main_queue(), ^{
+            [self.doricContext.navBar doric_navBar_setTitle:param[@"title"]];
+            [promise resolve:nil];
+        });
+    } else {
+        [promise reject:@"Not implement NavBar"];
+    }
+}
+
+- (void)setBgColor:(NSDictionary *)param withPromise:(DoricPromise *)promise {
+    if (self.doricContext.navBar) {
+        dispatch_async(dispatch_get_main_queue(), ^{
+            UIColor *color = DoricColor(param[@"color"]);
+            [self.doricContext.navBar doric_navBar_setBackgroundColor:color];
+            [promise resolve:nil];
+        });
+    } else {
+        [promise reject:@"Not implement NavBar"];
+    }
+}
+
+@end

iOS/Pod/Classes/Plugin/DoricNavigatorPlugin.m

@@ -27,7 +27,7 @@ - (void)push:(NSDictionary *)params {
         if (params[@"animated"]) {
             animated = [params[@"animated"] boolValue];
         }
-        [self.doricContext.navigator push:params[@"scheme"] alias:params[@"alias"] animated:animated];
+        [self.doricContext.navigator doric_navigator_push:params[@"scheme"] alias:params[@"alias"] animated:animated];
     });
 }
 
@@ -37,7 +37,7 @@ - (void)pop:(NSDictionary *)params {
         if (params[@"animated"]) {
             animated = [params[@"animated"] boolValue];
         }
-        [self.doricContext.navigator pop:animated];
+        [self.doricContext.navigator doric_navigator_pop:animated];
     });
 }
 @end

iOS/Pod/Classes/Plugin/DoricShaderPlugin.m

@@ -23,6 +23,7 @@
 #import "DoricShaderPlugin.h"
 #import "DoricRootNode.h"
 #import "DoricUtil.h"
+#import "Doric.h"
 
 #import <JavaScriptCore/JavaScriptCore.h>
 
@@ -31,13 +32,16 @@
 @implementation DoricShaderPlugin
 
 - (void)render:(NSDictionary *)argument {
-    if(!argument) {
+    if (!argument) {
         return;
     }
     __weak typeof(self) _self = self;
     dispatch_async(dispatch_get_main_queue(), ^{
         __strong typeof(_self) self = _self;
-        [self.doricContext.rootNode render:argument[@"props"]];
+        [self.doricContext.rootNode also:^(DoricRootNode *it) {
+            it.viewId = argument[@"id"];
+            [it render:argument[@"props"]];
+        }];
     });
 }
 

iOS/Pod/Classes/Shader/DoricViewNode.m

@@ -192,7 +192,7 @@ - (void)onClick:(UIView *)view {
     do {
         [ret addObject:node.viewId];
         node = node.superNode;
-    } while (node && ![node isKindOfClass:[DoricRootNode class]]);
+    } while (node);
 
     return [[ret reverseObjectEnumerator] allObjects];
 }

iOS/Pod/Classes/Util/DoricUtil.h

@@ -37,4 +37,6 @@ NSBundle *_Nonnull DoricBundle(void);
 #define DC_UNLOCK(lock) dispatch_semaphore_signal(lock);
 #endif
 
-void showToast(NSString *_Nonnull text, DoricGravity gravity);
+void ShowToast(NSString *_Nonnull text, DoricGravity gravity);
+
+UIImage *_Nonnull UIImageWithColor(UIColor *color);

iOS/Pod/Classes/Util/DoricUtil.m

@@ -48,7 +48,7 @@ void DoricLog(NSString *_Nonnull format, ...) {
 }
 
 
-void showToast(NSString *text, DoricGravity gravity) {
+void ShowToast(NSString *text, DoricGravity gravity) {
     UIView *superView = [UIApplication sharedApplication].windows.lastObject;
     UILabel *label = [[UILabel alloc] init];
     label.font = [UIFont systemFontOfSize:20.f];
@@ -75,3 +75,14 @@ void showToast(NSString *text, DoricGravity gravity) {
         [label removeFromSuperview];
     });
 }
+
+UIImage *UIImageWithColor(UIColor *color) {
+    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
+    UIGraphicsBeginImageContext(rect.size);
+    CGContextRef context = UIGraphicsGetCurrentContext();
+    CGContextSetFillColorWithColor(context, [color CGColor]);
+    CGContextFillRect(context, rect);
+    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
+    UIGraphicsEndImageContext();
+    return image;
+}

js-framework/src/ui/panel.ts

@@ -42,6 +42,11 @@ export abstract class Panel {
 
     private __data__: any
     private __root__ = new Root
+    private headviews: Map<string, View> = new Map
+
+    addHeadView(v: View) {
+        this.headviews.set(v.viewId, v)
+    }
 
     getRootView() {
         return this.__root__
@@ -50,6 +55,9 @@ export abstract class Panel {
     getInitData() {
         return this.__data__
     }
+    constructor() {
+        this.addHeadView(this.__root__)
+    }
 
     @NativeCall
     private __init__(frame: Frame, data: any) {
@@ -90,21 +98,26 @@ export abstract class Panel {
         const v = this.retrospectView(viewIds)
         if (v === undefined) {
             loge(`Cannot find view for ${viewIds}`)
+        } else {
+            const argumentsList: any = [callbackId]
+            for (let i = 2; i < arguments.length; i++) {
+                argumentsList.push(arguments[i])
+            }
+            return Reflect.apply(v.responseCallback, v, argumentsList)
         }
-        const argumentsList: any = [callbackId]
-        for (let i = 2; i < arguments.length; i++) {
-            argumentsList.push(arguments[i])
-        }
-        return Reflect.apply(v.responseCallback, v, argumentsList)
     }
 
-    private retrospectView(ids: string[]): View {
+    private retrospectView(ids: string[]): View | undefined {
-        return ids.reduce((acc: View, cur) => {
+        return ids.reduce((acc: View | undefined, cur) => {
-            if (Reflect.has(acc, "subviewById")) {
+            if (acc === undefined) {
-                return Reflect.apply(Reflect.get(acc, "subviewById"), acc, [cur])
+                return this.headviews.get(cur)
+            } else {
+                if (Reflect.has(acc, "subviewById")) {
+                    return Reflect.apply(Reflect.get(acc, "subviewById"), acc, [cur])
+                }
+                return acc
             }
-            return acc
+        }, undefined)
-        }, this.__root__)
     }
 
     private nativeRender(model: Model) {

js-framework/src/util/nativeModules.ts

@@ -15,6 +15,8 @@
  */
 import { BridgeContext } from "../runtime/global";
 import { Gravity } from "./gravity";
+import { Panel } from "../ui/panel";
+import { Color } from "./color";
 
 export function modal(context: BridgeContext) {
     return {
@@ -180,3 +182,32 @@ export function navigator(context: BridgeContext) {
         },
     }
 }
+
+export function navbar(context: BridgeContext) {
+    const entity = context.entity
+    let panel: Panel | undefined = undefined
+    if (entity instanceof Panel) {
+        panel = entity
+    }
+
+    return {
+        isHidden: () => {
+            return context.navbar.isHidden() as Promise<boolean>
+        },
+        setHidden: (hidden: boolean) => {
+            return context.navbar.setHidden({
+                hidden,
+            })
+        },
+        setTitle: (title: string) => {
+            return context.navbar.setTitle({
+                title,
+            })
+        },
+        setBgColor: (color: Color) => {
+            return context.navbar.setBgColor({
+                color: color.toModel(),
+            })
+        },
+    }
+}