使用原生组件

react-native-device-info 这个项目支持了大部分常见的原生信息获取的能力，所以我们不再自己全新开发而是直接选择它来实现我们获取版本号的能力。

  • npm安装
  1. npm install --save react-native-device-info
  • Podfile中添加该组件
  1. # ios/Podfile中添加如下依赖
  2. pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'

运行 pod install

  • 重新编译原生项目如果编译失败，请重启Xcode尝试。

  • 使用插件

  1. DeviceInfo.getVersion()

我们已经能成功的获取到版本号，完善 VersionScene 的界面即可。

  1. // modules/about/VersionScene/VersionScene.js
  2. import React from 'react'
  3. import { View, Text, Image, Linking } from 'react-native'
  4. import { WeBaseScene } from '@webank/trident'
  5. import DeviceInfo from 'react-native-device-info'
  7. export default class VersionScene extends WeBaseScene {
  8.   static navigationOptions = () => ({
  9.     headerTitle: '关于我们'
  10.   })
  12.   render () {
  13.     return (
  14.       <View style={{
  15.         flex: 1,
  16.         flexDirection: 'column',
  17.         justifyContent: 'flex-start',
  18.         alignItems: 'center',
  19.         paddingTop: 120
  20.       }}>
  21.         <Image style={{
  22.           borderRadius: 60,
  23.           width: 120,
  24.           height: 120
  25.         }} source={require('assets/images/icon.png')} />
  26.         <Text style={{
  27.           paddingTop: 16
  28.         }}>WeTrident Framework Demo {DeviceInfo.getVersion()}({DeviceInfo.getBuildNumber()})</Text>
  30.         <Text
  31.           style={{ color: '#53b4ff' }}
  32.           onPress={() => Linking.openURL('https://github.com/WeBankFinTech/WeTrident')}>
  33.           WeTrident Website
  34.         </Text>
  35.       </View>
  36.     )
  37.   }
  38. }

至此我们的WeBookStore也基本成型，接着我们详细介绍一些WeTrident为了方面调试做的一些工作。