Регистрация React Native Code Push с помощью React Native Navigation от Wix

Question

Я использую реагировать-нативный код-push .это:

Этот плагин обеспечивает интеграцию на стороне клиента для службы CodePush, позволяя вам легко добавлять динамические обновления в ваши приложения React Native.

но В некоторых нативных реализациях навигации, таких как response-native-navigation , нет корневого компонента.приложение начнет вызывать функцию, подобную этой:

// index.js

import { Navigation } from 'react-native-navigation';

Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'One',
      screen: 'example.FirstTabScreen', // this is a registered name for a screen
      icon: require('../img/one.png'),
      selectedIcon: require('../img/one_selected.png'), // iOS only
      title: 'Screen One'
    },
    {
      label: 'Two',
      screen: 'example.SecondTabScreen',
      icon: require('../img/two.png'),
      selectedIcon: require('../img/two_selected.png'), // iOS only
      title: 'Screen Two'
    }
  ]
});
// or a single screen app like:
Navigation.registerComponent('example.MainApplication', () => MainComponent);

Navigation.startSingleScreenApp({
  screen: {
    screen: 'example.MainApplication', 
    navigatorButtons: {}, 
    navigatorStyle: {
      navBarHidden: true
    }
  },

})

, поскольку нет корневого компонента, неясно, куда я должен вызвать CodePush, так как обычно я должен обернуть весь корневой компонент с CodePush, каккомпонент более высокого порядка.то, что я делал, было:

// index.js
class MyRootComponent extends Component {
  render () {
    return <MainNavigator/> // a navigator using react-navigation
  }
}

let codePushOptions = {
  checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
  installMode: CodePush.InstallMode.ON_NEXT_RESUME
}


export default CodePush(codePushOptions)(MyRootComponent)

Есть ли правильный способ решить эту проблему!?

---

Я знаю, что мог бы сделать это:

Navigation.registerComponent('example.MainApplication', () => CodePush(codePushOptions)(RootComponent));

Navigation.startSingleScreenApp({
  screen: {
    screen: 'example.MainApplication', 
    navigatorButtons: {},
    navigatorStyle: {
      navBarHidden: true
    }
  },

})

но тогда я должен использовать Navigator only для проецирования моего корневого компонента, и это не выглядит хорошей идеей.Я думаю, что эта проблема, вероятно, имеет лучшую практику, которую я ищу.

---

ОБНОВЛЕНИЕ

Я думаю, что есть некоторые сложности при регистрации навигатора вкладок внутристекнавигатор в react-native-navigation по крайней мере я не смог преодолеть эту проблему.Пример tabBasedApp в react-native-navigation с react-native-code-push, будет все, что мне нужно.

Answer 1

У меня так получилось, хотя для RNN v2

// index.js
import App from './App';
const app = new App();

// App.js
import CodePush from 'react-native-code-push';
import { Component } from 'react';
import { AppState } from 'react-native';
import { Navigation } from 'react-native-navigation';
import configureStore from './app/store/configureStore';
import { registerScreens } from './app/screens';

const appStore = configureStore();
registerScreens(appStore, Provider);

const codePushOptions = {
  checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
  updateDialog: true,
  installMode: CodePush.InstallMode.IMMEDIATE
};

export default class App extends Component {
    constructor(props) {
        super(props);
        // Set app state and listen for state changes
        this.appState = AppState.currentState;
        AppState.addEventListener('change', this.handleAppStateChange);

        this.codePushSync();
        Navigation.events().registerAppLaunchedListener(() => {
            this.startApp();
        });
    }

    handleAppStateChange = nextAppState => {
        if (this.appState.match(/inactive|background/) && nextAppState === 'active') {
            this.handleOnResume();
        }
        this.appState = AppState.currentState;
    };

    codePushSync() {
        CodePush.sync(codePushOptions);
    }


    handleOnResume() {
        this.codePushSync();
        ...
    }

    startApp() {
        Navigation.setRoot({
            root: {
                stack: {
                    children: [
                        {
                            component: {
                                name: 'MyApp.Login'
                            }
                        }
                    ]
                }
            }
        });
    }
}

// app/screens/index.js
import CodePush from 'react-native-code-push';
import { Navigation } from 'react-native-navigation';
import Login from './Login';

function Wrap(WrappedComponent) {
    return CodePush(WrappedComponent);
}

export function registerScreens(store, Provider) {
    Navigation.registerComponentWithRedux(
        'MyApp.Login',
        () => Wrap(Login, store),
        Provider,
        store.store
    );
    ...
}

Answer 2

Спасибо за предыдущие фрагменты кода.Мне удалось получить принудительную проверку кода при возобновлении работы приложения и немедленном обновлении с помощью response-native-navigation V2 с помощью приведенного ниже кода без необходимости использования компонента-оболочки для codePush.Это релевантная часть логики запуска приложения.

    Navigation.events().registerAppLaunchedListener(() => {
      console.log('Navigation: registerAppLaunchedListener ')
      start()
    })

    function checkCodePushUpdate () {
      return  codePush.sync({
        checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
        installMode: codePush.InstallMode.IMMEDIATE,
        deploymentKey: CODEPUSH_KEY,
      })
    }

    function start () {
      checkCodePushUpdate ()
        .then(syncStatus => {
          console.log('Start: codePush.sync completed with status: ', syncStatus)
          // wait for the initial code sync to complete else we get flicker
          // in the app when it updates after it has started up and is
          // on the Home screen
          startApp()
          return null
        })
        .catch(() => {
          // this could happen if the app doesn't have connectivity
          // just go ahead and start up as normal
          startApp()
        })
    }

    function startApp() {
      AppState.addEventListener('change', onAppStateChange)
      startNavigation()
    }

    function onAppStateChange (currentAppState) {
      console.log('Start: onAppStateChange: currentAppState: ' + currentAppState)
      if (currentAppState === 'active') {
        checkCodePushUpdate()
      }
    }

    function startNavigation (registered) {
      console.log('Start: startNavigation')

      registerScreens()

      Navigation.setRoot({
        root: {
          stack: {
            children: [{
              component: {
                name: 'FirstScreen,
              },
            }],
          },
        },
      })
    }

Answer 3

Я нашел ответ сам.Посмотрите на этот пример структуры проекта:

.
├── index.js
├── src
|   └── app.js
└── screens
    ├── tab1.html
    └── tab2.html

вы можете зарегистрировать вас code-push в index.js.

//index.js
import { AppRegistry } from 'react-native';
import App from './src/app';
import CodePush from 'react-native-code-push'

let codePushOptions = {
  checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
  installMode: CodePush.InstallMode.ON_NEXT_RESUME
}

AppRegistry.registerComponent('YourAppName', () => CodePush(codePushOptions)(App));

, теперь вы можете запустить react-native-navigation в app.js, как это:

import {Navigation} from 'react-native-navigation';
import {registerScreens, registerScreenVisibilityListener} from './screens';

registerScreens();
registerScreenVisibilityListener();

const tabs = [{
  label: 'Navigation',
  screen: 'example.Types',
  icon: require('../img/list.png'),
  title: 'Navigation Types',
}, {
  label: 'Actions',
  screen: 'example.Actions',
  icon: require('../img/swap.png'),
  title: 'Navigation Actions',
}];

Navigation.startTabBasedApp({
  tabs,
  tabsStyle: {
    tabBarBackgroundColor: '#003a66',
    tabBarButtonColor: '#ffffff',
    tabBarSelectedButtonColor: '#ff505c',
    tabFontFamily: 'BioRhyme-Bold',
  },
  appStyle: {
    tabBarBackgroundColor: '#003a66',
    navBarButtonColor: '#ffffff',
    tabBarButtonColor: '#ffffff',
    navBarTextColor: '#ffffff',
    tabBarSelectedButtonColor: '#ff505c',
    navigationBarColor: '#003a66',
    navBarBackgroundColor: '#003a66',
    statusBarColor: '#002b4c',
    tabFontFamily: 'BioRhyme-Bold',
  }
});