如何强制用户使用React Native更新应用程序

Question

我已在应用程序和 Play 商店中更新了我的应用程序，我想强制我的应用程序用户在应用程序商店和 Play 商店中更新新版本的应用程序。

Answer 1

您可以使用此库检查应用程序的 App Store / Play Store 版本 react-native-appstore-版本检查器。

在 expo 应用程序中，您可以使用

Constants.nativeAppVersion

获取当前捆绑包版本。 文档。

现在，在您的根 React Native 组件中，您可以添加事件侦听器来检测应用程序状态更改。每次应用程序从后台转换到前台时，您都可以运行逻辑来确定当前版本和最新版本，并提示用户更新应用程序。

 import { AppState } from 'react-native';


 class Root extends Component {

   componentDidMount() {
     AppState.addEventListener('change', this._handleAppStateChange);
   }



   _handleAppStateChange = (nextState) => {
     if (nextState === 'active') {

        /**
                Add code to check for the remote app version.
                Compare it with the local version. If they differ, i.e.,
                (remote version) !== (local version), then you can show a screen,
                with some UI asking for the user to update. (You can probably show
                a button, which on press takes the user directly to the store)
         */


     }
    }



   componentWillUnmount() {
      AppState.removeEventListener('change', this._handleAppStateChange);

   }

}

Answer 2

import VersionCheck from 'react-native-version-check';

我为此目的使用了版本检查库，我使用的方法如下。如果版本较低，我将打开一个模式，其中会出现更新按钮，并且该按钮会重定向到应用商店/谷歌播放

  componentDidMount() {
this.checkAppUpdate();
}


  checkAppUpdate() {
VersionCheck.needUpdate().then(res => {
  if (res.isNeeded) {
    setTimeout(() => {
      this.setState({openModal: true});
    });
  }
});
}

  updateApp = () => {
VersionCheck.getStoreUrl({
  appID: 'com.showassist.showassist',
  appName,
})
  .then(url => {
    Linking.canOpenURL(url)
      .then(supported => {
        if (!supported) {
        } else {
          return Linking.openURL(url);
        }
      })
      .catch(err => console.error('An error occurred', err));
  })
  .catch(err => {
    console.log(`error is: ${err}`);
  });
 };

Answer 3

对于未来的读者。

如果您使用 Expo 管理的工作流程，请使用

react-native-version-check-expo

或

yarn add react-native-version-check-expo

安装此软件包

npm install react-native-version-check-expo

。

请参阅 Github 上的包文档以获取使用指南。

Answer 4

我正在使用 react-native-version-check-expo 库来实现这一点。对我来说工作得很好。

Answer 5

我正在使用这个库github.com/kimxogus/react-native-version-check

但它有一些错误，所以我必须更新节点模块并在两个函数 VersionCheck.getAppStoreUrl 和 VersionCheck.getPlayStoreUrl 之前添加等待

让我分享代码

const checkAppVersionFirstThenProceed = async () => {
  try {
    const latestVersion = Platform.OS === 'ios'
      ? await fetch(`https://itunes.apple.com/in/lookup?bundleId=com.abc`)
          .then(r => r.json())
          .then((res) => { return res?.results[0]?.version })
      : await VersionCheck.getLatestVersion({
          provider: 'playStore',
          packageName: 'com.abc',
          ignoreErrors: true,
      });

    const currentVersion = VersionCheck.getCurrentVersion();
    console.log(currentVersion , "currentVersion" , latestVersion)

    if (latestVersion > currentVersion) {
      Alert.alert(
        'Update Required',
        'A new version of the app is available. Please update to continue using the app.',
        [
          {
            text: 'Update Now',
            onPress: async () => {
              Linking.openURL(
                Platform.OS === 'ios'
                  ? await VersionCheck.getAppStoreUrl({ appID: 'xxxxxxxxxx' })
                  : await VersionCheck.getPlayStoreUrl({ packageName: 'yourpackagename' })
              );
            },
          },
        ],
        { cancelable: false }
      );
    } else {
    proceedWithApp();
    }
  } catch (error) {
    console.error('Error checking app version:', error);
  }
};

在node_modlues getstoreUrl.js中

export const getAppStoreUrl = async (
      option: GetAppStoreUrlOption
    ): Promise<string> => {
      const opt = option || {};
      try {
        if (isNil(opt.appID)) {
          throw new Error('appID is empty.');
        }
    
    
        if (!opt.country) {
          opt.country = await getVersionInfo().getCountry();
        }
    
    
        const countryCode = opt.country ? `${opt.country}/` : '';
    
        // removed country code and mt=8 added
        return `itms-apps://apps.apple.com/app/id${opt.appID}?mt=8`;
      } catch (e) {
        console.error(e)
        if (opt.ignoreErrors) {
          console.warn(e); // eslint-disable-line no-console
        } else {
          throw e;
        }
      }
    };

干杯！