写一个react native自定义的版本升级弹框

效果：

下面上代码

class VersionModal extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isShow: false, //在父组件控制显示隐藏
      imgObjHg: 0  // 根据宽度拿到图片自适应高度
    }
  }
  componentDidMount() {
    const { width: screenWidth } = Dimensions.get('window')
    let cover = require('./../resources/images/updateVersion.png')
    let imageObj = Image.resolveAssetSource(cover)
    let { width, height } = imageObj
    // 根据屏幕宽度拿到图片自适应高度
    let myHeight = Math.floor(screenWidth / width * height); 
    this.setState({imgObjHg: myHeight})
  }
  
  //显示根据父组件传来的isShow来控制显示隐藏
  componentWillReceiveProps(nextProps) {
    this.setState({isShow: nextProps.isShow})
  }

  //在子组件修改父组件的数据
  componentWillUnmount() {
    this.props.showModal({isShow: false})
  }
  
  //版本下载升级
  update() {
    let self = this
    let {newVersion, apkLink} = self.props
    const android = RNFetchBlob.android

    async function crequestMultiplePermission() {
      try {
        let isOpen = await PermissionsAndroid.check(
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
        );

        if (!isOpen) {
          let res = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
          )
          if (res !== 'granted') {
            Alert.alert(
              '存储权限没打开',
              '请在手机的“设置”选项中,允许访问您的存储权限',
            )
          }
        } else {
          androidDownload()
        }
      } catch (err) {
        console.log(err)
      }
    }

    function androidDownload() {
      RNFetchBlob.config({
        addAndroidDownloads: {
          useDownloadManager: true,
          title: 'xxx.apk',
          description: '正在下载...',
          mime: 'application/vnd.android.package-archive',
          path: `${RNFetchBlob.fs.dirs.DownloadDir}/xxx${newVersion}.apk`,
          mediaScannable: true,
          notification: true,
        },
      })
        .fetch('GET', `${apkLink}`)
        .then(res => {
          //下载成功后自动打开安装已下载apk文件
          android.actionViewIntent(
            res.path(),
            'application/vnd.android.package-archive',
          );
        });
    }

    function appleDownload() {
      const appLink = 'xxxxxxx';
      Linking.openURL(appLink).catch(err =>
        console.error('An error occurred', err),
      );
    }

    if (Platform.OS === 'android') {
      crequestMultiplePermission();
      setTimeout(() => {this.props.showModal({isShow: false})},1000)
    } else {
      appleDownload();
      setTimeout(() => {this.props.showModal({isShow: false})},1000)
    }
    
  }

  render() {
    let self = this
    let {newVersion, showBack} = self.props
    return (
      <View style={styles.centeredView}>
        <Modal
          animationType="slide"
          transparent={true}       
          onRequestClose={() => {
             self.props.showModal({isShow: false})
          }}
        >
          <View style={styles.modalView}>
            <Image 
              resizeMode="contain" 
              style={[styles.img,{ width: '100%', height: self.state.imgObjHg, top: - (self.state.imgObjHg * 0.28) }]}
              source={require('./../resources/images/updateVersion.png')}
            />
            <View style={styles.header}>
              <Text style={styles.title}>发现新版本!</Text>
              <Text style={styles.text}>{newVersion}版本，体验全新升级</Text>
            </View>
            <View style={[styles.content,{top: - (self.state.imgObjHg * 0.42)}]}>
              <Text style={styles.tip}>{newVersion}版本全新升级</Text>
              <Text style={styles.tip}>本次内容全面改版</Text>
              <TouchableHighlight
                style={styles.updateBtn}
                onPress={() => {
                  self.update();
                }}>
                <Text style={styles.updateTxt}>立即升级</Text>
              </TouchableHighlight>
              {
                showBack ? <TouchableHighlight
                  onPress={() => {
                    self.props.showModal({isShow: false})
                  }}>
                  <Text style={styles.backTxt}>跳过</Text>
                </TouchableHighlight>: null
              }
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

父组件

{
   this.state.isShow ? <VersionModal showModal={this.showModal.bind(this)} showBack={true} isShow={this.state.isShow} newVersion={this.state.newVersion} apkLink={this.state.apkLink}/> : null
}

样式自己写咯，不提供了