Navigation UI Optimization Demo

[LiuMengzhou]

1. 👍如果已经适配所有的刘海屏，请忽略。

2. 🤔如果是已经适配了iPhone X，而没有适配iPhone XR，iPhone Xs 和 iPhone Xs Max的话，需要在之前判断是否是iPhone X中增加新机型的判断。参见：

const bangsScreen = [
  "iPhone10,3", "iPhone10,6", // iPhone X
  "iPhone11,8", // iPhone XR
  "iPhone11,2", // iPhone Xs
  "iPhone11,4", "iPhone11,6" // iPhone Xs Max
] // 刘海屏
let bigScreen = bangsScreen.includes(MHPluginSDK.systemInfo.mobileModel); // 判断是否是刘海屏

3. 😕如果连iPhone X 都没有适配过。可以参考demo进行修改。有疑问请先检查自己的样式，无法解决可以在本issue下回复。

./Main/MHGlobalData.js

var MHGlobal = {}
var MHPluginSDK = require('NativeModules').MHPluginSDK;

+ const bangsScreen = [
+   "iPhone10,3", "iPhone10,6", // iPhone X
+   "iPhone11,8", // iPhone XR
+   "iPhone11,2", // iPhone Xs
+   "iPhone11,4", "iPhone11,6" // iPhone Xs Max
+ ] // 刘海屏
+ let bigScreen = bangsScreen.includes(MHPluginSDK.systemInfo.mobileModel); // 判断是否是刘海屏
+ const SAFE_AREA = bigScreen ? 35 : 20; // 导航栏上方Safe Area
+ const BAR_CONTENT_HEIGHT = 44; // 导航栏内容的高度
+ const TOTAL_BAR_HEIGHT = SAFE_AREA + BAR_CONTENT_HEIGHT; // 整个导航栏的高度
+ MHGlobal.SAFE_AREA = SAFE_AREA;
+ MHGlobal.BAR_CONTENT_HEIGHT = BAR_CONTENT_HEIGHT;
+ MHGlobal.TOTAL_BAR_HEIGHT = TOTAL_BAR_HEIGHT;
+ MHGlobal.APP_MARGINTOP = TOTAL_BAR_HEIGHT + 10; // 插件主体部分的上边距，和导航栏间隔10

MHGlobal.deviceName = MHPluginSDK.deviceName;
module.exports = MHGlobal

./CommonModules/MHNavigationBar.js

_getComponent: function (
    /*string*/componentName,
    /*object*/route,
    /*number*/index
  ) /*?Object*/ {
    // ...
    var initialStage = index === navStatePresentedIndex(this.props.navState) ?
      this.props.navigationStyles.Stages.Center :
      this.props.navigationStyles.Stages.Left;
+    for (let key in initialStage) {
+      if (MHGlobalData.SAFE_AREA !== initialStage[key].top) {
+        initialStage[key].top = MHGlobalData.SAFE_AREA;
+      }
+    }
    rendered = (
        // ...
    );
    // ...
  },

./Main/index.ios.js

var navigationBarRouteMapper = {
      LeftButton: function (route, navigator, index, navState) {
        if (route.renderNavLeftComponent) {
          return route.renderNavLeftComponent(route, navigator, index, navState);
        } else {
          var previousRoute = navState.routeStack[index - 1];
          return (
            <View style={{
              left: 0,
              width: 29 + 15 * 2,
-               height: APPBAR_HEIGHT,
+               height: MHGlobalData.BAR_CONTENT_HEIGHT,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
              <ImageButton />
//...

var styles = StyleSheet.create({
  navBar: {
-    marginTop:APPBAR_MARGINTOP,
+    height: MHGlobalData.TOTAL_BAR_HEIGHT,
    backgroundColor: 'white',
  },
  navBarTitleText: {
    color: '#373E4D',
    fontWeight: '500',
    fontSize: 18,
    marginVertical: 9,
+   height: MHGlobalData.BAR_CONTENT_HEIGHT,
  },
  // ...
});

./Main/MainPage.js

var route = {
  // ...
  renderNavRightComponent: function (route, navigator, index, navState) {
    if (MHPluginSDK.userId == MHPluginSDK.ownerId) // 非分享设备
    {
      return (
        <View
          style={{
            left: 0,
            width: 29 + 15 * 2,
-           height: APPBAR_HEIGHT,
+           height: MHGlobalData.BAR_CONTENT_HEIGHT,
            justifyContent: 'center',
            alignItems: 'center'
          }}>
          <ImageButton
            source={{ uri: MHPluginSDK.uriNaviMoreButtonImage, scale: PixelRatio.get() }}
            onPress={() => {
              openMorePage(navigator);
            }}
            style={[{ width: 29, height: 29, tintColor: '#666' }]}
          />
        </View>
      );
    }
    else {
      return null;
    }
  },
}

[329695834]

有颜色的导航栏如何适配, 把导航栏向下移动24后,过渡动画到白色导航栏时会有宽度为24的白色横线过渡,插件的主页是白色导航栏,其他子页面都是其他颜色的导航栏

[LiuMengzhou]

把marginTop去掉，导航栏作为一个整体，填充颜色

[329695834]

你好 请教一下如何实现 进入带有listView 的页面,然后上滑可以移动listView到页面顶部停下,并且下滑可以把listview移下来, 动画的效果和闹钟的天气和出现界面一样.

[LiuMengzhou]

你好 请教一下如何实现 进入带有listView 的页面,然后上滑可以移动listView到页面顶部停下,并且下滑可以把listview移下来, 动画的效果和闹钟的天气和出现界面一样.

@329695834 #118