使用codepush进行ReactNative热部署react-native-code-push

最新推荐文章于 2022-06-09 10:13:17 发布

转载最新推荐文章于 2022-06-09 10:13:17 发布 · 729 阅读

【React-Native2点滴知识】专栏收录该内容

698 篇文章

订阅专栏

本文介绍如何使用react-native-code-push实现React Native应用的热更新功能。通过设置不同的安装模式，可以实现在不同场景下的更新策略。同时展示了如何利用Redux进行状态管理，并集成了自定义API请求中间件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-native-code-push 使用codepush进行ReactNative热部署
import React, { Component } from 'react'
import reducers from './reducers'
import thunk from 'redux-thunk'
import {Provider} from 'react-redux'
import {persistStore, autoRehydrate} from 'redux-persist'
import {createStore, applyMiddleware} from 'redux'
import {AsyncStorage} from 'react-native'
import codePush from 'react-native-code-push'
import apiRequest from './helper/apiRequestMiddleware'
import Home from './pages/MainScreen'

const createStoreWithMiddleware = applyMiddleware(thunk, apiRequest)(createStore)

const store = autoRehydrate()(createStoreWithMiddleware)(reducers)
persistStore(store, {storage: AsyncStorage})
import {
  Platform,
  StatusBar,
  BackAndroid,
  View,
  Navigator
} from 'react-native'

export const STATUS_BAR_HEIGHT = (Platform.OS === 'ios' ? 20 : 25)
export const NAV_BAR_HEIGHT = (Platform.OS === 'ios' ? 44 : 56)
export const ABOVE_LOLIPOP = Platform.Version && Platform.Version > 19

export default class extends Component {
  /*
   * IMMEDIATE(0) // 更新完毕，立即生效
   * ON_NEXT_RESTART(1) // 下次启动生效
   * ON_NEXT_RESUME(2) // 切到后台，重新回来生效
   */
  componentDidMount () {
    codePush.sync({
      updateDialog: {
        optionalIgnoreButtonLabel: '稍后',
        optionalInstallButtonLabel: '更新',
        mandatoryUpdateMessage: '',
        optionalUpdateMessage: '',
        appendReleaseDescription: true,
        descriptionPrefix: '有新版本，是否下载？\n\n ===更新内容===\n',
        title: '更新提示'
      },
      installMode: codePush.InstallMode.ON_NEXT_RESUME
    })
    BackAndroid.addEventListener('hardwareBackPress', this.handleBack)
  }

  componentWillUnmount () {
    BackAndroid.removeEventListener('hardwareBackPress', this.handleBack)
  }

  handleBack = () => {
    const navigator = this.refs.navigator
    if (navigator && navigator.getCurrentRoutes().length > 1) {
      navigator.pop()
      return true
    }
    return false
  };

  render () {
    return (
      <Provider store={store}>
        <View style={{flex: 1}}>
          <StatusBar
            barStyle='light-content'
            backgroundColor='transparent'
            style={{height: STATUS_BAR_HEIGHT}}
            translucent={ABOVE_LOLIPOP}
          />
          <Navigator
            ref='navigator'
            initialRoute={{
              component: Home
            }}
            configureScene={this.configureScene}
            renderScene={(route, navigator) => {
              return <route.component navigator={navigator} {...route} {...route.passProps}/>
            }}/>
        </View>
      </Provider>
    )
  }

  configureScene (route) {
    return route.scene || Navigator.SceneConfigs.FloatFromBottom
  }
}