带有 iOS 上的 Wix 导航的代码推送

Question

我已经在这个问题上呆了两天了，即使这个问题已经被问到了。没有一个答案帮助我。

我正在使用Wix导航V2并尝试使用CodePush进行即时更新。在暂存中，我可以看到 CodePush 日志和更新发生(只是检查查看日志(。但是，在生产环境中，我的应用总是在启动后恢复为黑屏。这是我到目前为止尝试过的。

这种方法：https://medium.com/react-coach/using-codepush-with-wix-react-native-navigation-a6a7938cee24

我还使用 appcenter codepush deployment list -a {myUserName}/{appName} -k

我也尝试过这些方法使用 React Native Navigation 注册 React Native Code Push by Wix

这是我的应用程序.js代码

  TODO: 
  SET ORIENTATION
*/
import { NetInfo, Platform } from "react-native";
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { Navigation } from "react-native-navigation";
import codePush from "react-native-code-push";
import { registerScreens, registerScreenVisibilityListener } from "./screens";
import rootReducer from "./redux/reducers/index";
import { connectionStatusChanged } from "./redux/actions";
const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);
registerScreens(store, Provider);
registerScreenVisibilityListener();
const handleConnectivityChange = reach => {
  store.dispatch(connectionStatusChanged(reach));
};
NetInfo.addEventListener("connectionChange", handleConnectivityChange);
export default class App {
  constructor() {
    store.subscribe(this.onStoreUpdate.bind(this));
    NetInfo.getConnectionInfo().then(reach => {
      handleConnectivityChange(reach);
    });
  }
  onStoreUpdate = () => {
    const { appRoot } = store.getState().appState;
    if (this.currentRoot !== appRoot) {
      // CODE PUSH SYNC
      codePush.sync({
        updateDialog: true,
        installMode: codePush.InstallMode.IMMEDIATE
      });
      this.currentRoot = appRoot;
      this.startApp(appRoot);
    }
  };
  startApp = root => {
    // ALL MY RNN V2 SCREENS (REMOVING TO REDUCE CODE)
  } 
}

这是我注册屏幕并使用代码推送包装 HOC 的地方

import React from "react";
import _ from "lodash";
import { Provider } from "react-redux";
import { Linking } from "react-native";
import { Navigation } from "react-native-navigation";
import codePush from "react-native-code-push";
import NavigationActions from "../navigation/navigationActions";

const codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
function wrap(WrappedComponent, store) {
  class PP extends React.PureComponent {
    componentWillMount() {
      Linking.addEventListener("url", this.deeplinkHandler);
      Linking.getInitialURL().then(url => {
        // FUNCTION HERE TO ROUTE TO ARTICLE, STRAIN, PRODUCT (when ap is closed)
        if (url) {
          const linkData = url.replace("weedup://", "").split("/");
          if (this.props.componentId === "home" && linkData[0] === "article") {
            // push component
            const { componentId } = this.props;
            NavigationActions.pushComponent({
              id: "home",
              name: "screen.Article",
              props: {
                fromDeepLink: true,
                fromBackground: false,
                article: {
                  id: linkData[1]
                }
              },
              title: "Article",
              topBarVisible: true,
              bottomTabsVisible: false
            });
          }
        }
      });
    }
    deeplinkHandler = event => {
      // FUNCTION HERE TO ROUTE TO ARTICLE, STRAIN, PRODUCT (opened)
      if (!_.isEmpty(event)) {
        const linkData = event.url.replace("weedup://", "").split("/");
        if (this.props.componentId === "home" && linkData[0] === "article") {
          const { componentId } = this.props;
          NavigationActions.pushComponent({
            id: "home",
            name: "screen.Article",
            props: {
              fromDeepLink: true,
              fromBackground: true,
              article: {
                id: linkData[1]
              }
            },
            title: "Article",
            topBarVisible: true,
            bottomTabsVisible: false
          });
        }
      }
    };
    render() {
      return (
        <Provider store={store}>
          <WrappedComponent {...this.props} />
        </Provider>
      );
    }
  }
  return codePush(codePushOptions)(PP);
}
export const registerScreens = store => {
 // REMOVING SCREEN TO REDUCE EXAMPLE CODE
};
export function registerScreenVisibilityListener() {
  Navigation.events().registerComponentDidAppearListener(
    ({ componentName }) => {
      console.log(`Displaying screen ${componentName}`);
    }
  );
}

最后，这是我的AppDelegate.m

 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "ReactNativeNavigation.h"
#import <React/RCTLinkingManager.h>
#import <CodePush/CodePush.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];
}
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
#ifdef DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
#else
  jsCodeLocation = [CodePush bundleURL];
#endif

  return YES;
}
@end

Answer 1

嘿，

也许我参加聚会迟到了，但由于我在将 RNN 与 CodePush 集成时偶然发现了您的问题，我想我会把它放在这里。

看起来你不在 DEBUG 中时没有使用 RNN，所以我会简单地用这个替换你的didFinishLaunchingWithOptions函数：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
#ifdef DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  jsCodeLocation = [CodePush bundleURL];
#endif
  [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
  return YES;
}

Answer 2

您还可以使用 Expo 实现热更新，这是包含 Expo 更新和 React Native 导航的工作示例。此项目未附加到世博会 CLI，因此您可以将其用作裸露的 React Native 项目

https://github.com/samithaf/expo-sample-app