广告屏react-native项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

745 line
21 KiB

  1. import React, { Component } from 'react';
  2. import {
  3. Platform,
  4. StyleSheet,
  5. Text,
  6. View,
  7. Image,
  8. ImageBackground,
  9. PixelRatio,
  10. NativeModules
  11. } from 'react-native';
  12. //引用插件
  13. import Package from './package.json'
  14. import HttpUtils from './HttpUtils.js';
  15. import CodePush from "react-native-code-push";
  16. import DeviceInfo from "react-native-device-info";
  17. import * as Animatable from 'react-native-animatable';
  18. var testMac = 'FF:FF:FF:FF:FF:FF'
  19. var contentItemDefault = {
  20. type:0,
  21. subType:0,
  22. qrcode:[],
  23. target:{
  24. coverImg:'',
  25. title:'',
  26. subTitle:'',
  27. priceStr:'',
  28. salePriceStr:'',
  29. remark:'',
  30. }
  31. }
  32. var baseInfoDefault = {
  33. imgUrlH:'',
  34. imgQrcodeWeapp:'',
  35. imgQrcodeWemp:''
  36. }
  37. var curAdIndex = 0;
  38. var errorMsg = {
  39. ERR_MAC_GET:'设备编号获取错误',
  40. ERR_DATA_GET:'广告数据获取错误'
  41. }
  42. export default class MyPage extends Component {
  43. constructor(props) {
  44. super(props);
  45. this.state = {
  46. baseInfo: baseInfoDefault,
  47. adDataList:[],
  48. contentItem0:null,
  49. contentItem1:null,
  50. contentItem2:null,
  51. contentDisplayStatus:false,
  52. syncMessage: "初始化..." ,
  53. errorMessage: '加载中...',
  54. progress: {
  55. receivedBytes:0,
  56. totalBytes:0
  57. },
  58. macAddress: '',
  59. versionInfo:'未知'
  60. };
  61. }
  62. // 监听更新状态
  63. codePushStatusDidChange(syncStatus) {
  64. switch(syncStatus) {
  65. case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
  66. this.setState({ syncMessage: "检查更新" });
  67. break;
  68. case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
  69. this.setState({ syncMessage: "下载更新" });
  70. break;
  71. case CodePush.SyncStatus.AWAITING_USER_ACTION:
  72. this.setState({ syncMessage: "等待用户操作" });
  73. break;
  74. case CodePush.SyncStatus.INSTALLING_UPDATE:
  75. this.setState({ syncMessage: "安装更新" });
  76. break;
  77. case CodePush.SyncStatus.UP_TO_DATE:
  78. this.setState({ syncMessage: "已更新到最新程序", progress: false });
  79. break;
  80. case CodePush.SyncStatus.UPDATE_IGNORED:
  81. this.setState({ syncMessage: "更新被取消", progress: false });
  82. break;
  83. case CodePush.SyncStatus.UPDATE_INSTALLED:
  84. this.setState({ syncMessage: "更新已安装,重启应用后生效", progress: false });
  85. break;
  86. case CodePush.SyncStatus.UNKNOWN_ERROR:
  87. this.setState({ syncMessage: "未知错误", progress: false });
  88. break;
  89. }
  90. }
  91. codePushDownloadDidProgress(progress) {
  92. this.setState({ progress });
  93. }
  94. // 列表滚动
  95. updateContent() {
  96. if (this.state.adDataList.length <=0)
  97. return false;
  98. if (curAdIndex >= this.state.adDataList.length) {
  99. curAdIndex = 0
  100. }
  101. this.setState({contentItem0:this.state.adDataList[curAdIndex]});
  102. if (curAdIndex + 1 < this.state.adDataList.length)
  103. this.setState({contentItem1:this.state.adDataList[curAdIndex+1]});
  104. else
  105. this.setState({contentItem1:null});
  106. if (curAdIndex + 2 < this.state.adDataList.length)
  107. this.setState({contentItem2:this.state.adDataList[curAdIndex+2]});
  108. else
  109. this.setState({contentItem2:null});
  110. curAdIndex+=3
  111. return true;
  112. }
  113. hbRequest() {
  114. HttpUtils.post(NativeModules.BuildConfig.apiHost + 'api/wxDeviceScreenAd/heartbeat?deviceId='
  115. +encodeURIComponent(this.state.macAddress),
  116. {version:this.state.versionInfo})
  117. .then(result => {
  118. })
  119. .catch(error => {
  120. })
  121. }
  122. getAdDataList() {
  123. HttpUtils.get(NativeModules.BuildConfig.apiHost + 'api/wxDeviceScreenAd/list?deviceId='+encodeURIComponent(this.state.macAddress)+'&pageNum=1&pageSize=1000')
  124. .then((result) => {
  125. if (result.code != 200) {
  126. this.setState({contentDisplayStatus: false})
  127. this.setState({errorMessage : result.message+'\n'+this.state.macAddress});
  128. } else if (result.data.list) {
  129. this.setState({adDataList : result.data.list});
  130. if (this.updateContent()) {
  131. this.setState({contentDisplayStatus: true})
  132. }
  133. } else {
  134. this.setState({contentDisplayStatus: false})
  135. this.setState({errorMessage : errorMsg.ERR_DATA_GET});
  136. }
  137. })
  138. .catch(error => {
  139. this.setState({contentDisplayStatus: false})
  140. this.setState({errorMessage : error.message});
  141. })
  142. }
  143. //
  144. getBaseInfo() {
  145. HttpUtils.get(NativeModules.BuildConfig.apiHost + 'api/wxDeviceScreenAd/info?deviceId='+encodeURIComponent(this.state.macAddress))
  146. .then(result => {
  147. if (result.code != 200) {
  148. this.setState({contentDisplayStatus: false})
  149. this.setState({errorMessage : result.message+'\n'+this.state.macAddress});
  150. } else if (result.data) {
  151. this.setState({baseInfo:result.data});
  152. } else {
  153. this.setState({contentDisplayStatus: false})
  154. this.setState({errorMessage : errorMsg.ERR_DATA_GET});
  155. }
  156. })
  157. .catch(error => {
  158. this.setState({contentDisplayStatus: false})
  159. this.setState({errorMessage : error.message});
  160. })
  161. }
  162. componentDidMount() {
  163. CodePush.allowRestart();
  164. CodePush.sync(
  165. { installMode: CodePush.InstallMode.IMMEDIATE},
  166. this.codePushStatusDidChange.bind(this),
  167. this.codePushDownloadDidProgress.bind(this)
  168. );
  169. CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
  170. .then((metadata: LocalPackage) => {
  171. this.setState({ versionInfo: metadata ? metadata.appVersion + "-" + metadata.label : "Unknown"});
  172. }, (error: any) => {
  173. this.setState({ versionInfo: "Unknown"});
  174. });
  175. DeviceInfo.getMACAddress().then((mac)=>{
  176. if (mac=='') {
  177. if (NativeModules.BuildConfig.buildType == 'debug') {
  178. this.setState({macAddress : this.testMac})
  179. this.startAd()
  180. } else {
  181. this.setState({ contentDisplayStatus: false})
  182. this.setState({ errorMessage : errorMsg.ERR_MAC_GET});
  183. }
  184. } else {
  185. this.setState({macAddress : mac})
  186. this.startAd()
  187. }
  188. this.setState({ contentDisplayStatus: true})
  189. }).catch(e => {
  190. this.setState({ contentDisplayStatus: false})
  191. this.setState({ errorMessage : errorMsg.ERR_MAC_GET});
  192. })
  193. }
  194. startAd() {
  195. this.getBaseInfo()
  196. this.getAdDataList()
  197. setInterval(
  198. ()=>{
  199. if (this.state.contentDisplayStatus) {
  200. this.setState({ contentDisplayStatus: false})
  201. if (this.updateContent()) {
  202. this.setState({ contentDisplayStatus: true})
  203. }
  204. } else {
  205. this.getBaseInfo()
  206. this.getAdDataList()
  207. }
  208. },
  209. 1000*10, //10秒更新一下页面
  210. );
  211. setInterval(
  212. ()=>{
  213. this.getAdDataList()
  214. },
  215. 1000*60*60, //1小时一次
  216. );
  217. setInterval(
  218. ()=>{
  219. this.hbRequest()
  220. },
  221. 1000*60*5, //5分钟一次
  222. );
  223. }
  224. getContentViewItemUplayer(contentItem) {
  225. if (contentItem.type == 0) {
  226. if (contentItem.subType == 2)
  227. return (<Image source={require('./image/groupbuy.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  228. if (contentItem.subType == 6)
  229. return (<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  230. if (contentItem.subType == 7)
  231. return (<Image source={require('./image/groupbuy.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  232. }
  233. }
  234. getContentViewItem(contentItem, annomation) {
  235. if (!contentItem)
  236. return (
  237. <View style={styles.contentItem}>
  238. </View>
  239. )
  240. actionText = '扫码领取';
  241. if (contentItem.target.type == 8)
  242. actionText = '扫码砍价';
  243. else if (contentItem.target.type == 9)
  244. actionText = '扫码拼团';
  245. merchantName = "";
  246. if (contentItem.target.merchantVoList.length > 1)
  247. merchantName = '多商户通用';
  248. else
  249. merchantName = contentItem.target.merchantVoList[0].merchantName;
  250. return (
  251. <Animatable.View animation={annomation} easing="ease-out" duration={1500} delay={500} useNativeDriver ={true} style={styles.contentItem}>
  252. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  253. {/* 列表 */}
  254. <View style={styles.contentItemTop}>
  255. <Image source={{uri: contentItem.target.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
  256. <View style={styles.contentItemTopDetail}>
  257. {/* 券的title */}
  258. <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
  259. {/* <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">你好世界你好你是你好宿舍熟话说术后</Text> */}
  260. {/* <Text style={styles.contentItemTopDetailRemark} numberOfLines={1} ellipsizeMode="tail">{contentItem.target.remark}</Text> */}
  261. <View style={styles.contentItemTopDetailPrice}>
  262. {/* 售价 */}
  263. <View style={styles.contentItemTopDetailCurPrice}>
  264. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>¥</Text>
  265. <Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.salePriceStr}</Text>
  266. </View>
  267. {/* 面额 */}
  268. <View style={styles.contentItemTopDetailSalePrice}>
  269. <Text style={styles.contentItemTopDetailSalePriceStr} >¥{contentItem.target.priceStr}</Text>
  270. </View>
  271. </View>
  272. </View>
  273. <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  274. </View>
  275. {/* 优惠券底部商户名称 */}
  276. <View style={styles.contentItemBottom}>
  277. <Text style={styles.contentItemBottomMerchantName}>{merchantName}</Text>
  278. <View style={styles.contentItemBottomPlacehold}></View>
  279. <Text style={styles.contentItemBottomAction}>{actionText}</Text>
  280. </View>
  281. </ImageBackground>
  282. {this.getContentViewItemUplayer(contentItem)}
  283. </Animatable.View>
  284. )
  285. }
  286. getContentView() {
  287. if (this.state.contentDisplayStatus) {
  288. return (<View style={styles.content}>
  289. {this.getContentViewItem(this.state.contentItem0,"slideInDown")}
  290. {this.getContentViewItem(this.state.contentItem1,"slideInLeft")}
  291. {this.getContentViewItem(this.state.contentItem2,"slideInRight")}
  292. </View>)
  293. }else{
  294. return (
  295. <View style={styles.content}>
  296. <Text style={styles.updatePage}>{this.state.errorMessage}</Text>
  297. </View>)
  298. }
  299. }
  300. render() {
  301. if (this.state.progress) {
  302. if (this.state.progress.totalBytes > 0)
  303. return (
  304. <Text style={styles.updatePage}>{this.state.syncMessage}{'\n'}
  305. {this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received{'\n'}
  306. </Text>
  307. );
  308. return (
  309. <Text style={styles.updatePage}>{this.state.syncMessage}
  310. </Text>
  311. );
  312. }
  313. return (
  314. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  315. {/* 头部title二维码开始 */}
  316. <View style={styles.title}>
  317. <View style={styles.titleImagePlace}>
  318. <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
  319. </View>
  320. <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} >
  321. <View style={styles.titleQrcodePlacehold}></View>
  322. <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
  323. <View style={styles.titleQrcodePlacehold}></View>
  324. </ImageBackground>
  325. </View>
  326. {/* 券列表展示列表开始 */}
  327. {this.getContentView()}
  328. {/* 底部商场信息展示开始 */}
  329. <View style={styles.bottom}>
  330. <View style={styles.bottomLogoBackground}>
  331. <Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='contain' style={styles.bottomLogo} />
  332. </View>
  333. <View style={styles.bottomQrcode1Background}>
  334. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode1} />
  335. <Text style={styles.bottomQrcode1Str}>小程序</Text>
  336. </View>
  337. <View style={styles.bottomQrcode2Background}>
  338. <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} />
  339. <Text style={styles.bottomQrcode1Str}>公众号</Text>
  340. </View>
  341. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  342. </View>
  343. </ImageBackground>
  344. );
  345. }
  346. }
  347. const styles = StyleSheet.create({
  348. updatePage:{
  349. flex: 2,
  350. width:'100%',
  351. height:'100%',
  352. backgroundColor:'transparent',
  353. textAlign :'center',
  354. textAlignVertical:'center',
  355. fontSize: 63/PixelRatio.get(),
  356. color: 'darkblue'
  357. },
  358. //layer background
  359. background:{
  360. flex: 1,
  361. width:'100%',
  362. height:'100%'
  363. },
  364. //layer top
  365. title:{
  366. flex: 6,
  367. flexDirection: 'row',
  368. alignItems: 'center',
  369. paddingLeft:42/PixelRatio.get(),
  370. paddingRight:42/PixelRatio.get(),
  371. backgroundColor:'transparent'
  372. },
  373. content:{
  374. flex: 18,
  375. flexDirection: 'column',
  376. alignItems: 'center',
  377. backgroundColor:'transparent'
  378. },
  379. bottom:{
  380. flex: 2,
  381. flexDirection: 'row',
  382. alignItems: 'center',
  383. paddingLeft:42/PixelRatio.get(),
  384. paddingRight:42/PixelRatio.get(),
  385. backgroundColor:'transparent'
  386. },
  387. //layer title
  388. titleImagePlace: {
  389. flex: 2,
  390. paddingTop: '20%',
  391. paddingLeft: '15%',
  392. alignItems: 'center',
  393. backgroundColor:'transparent'
  394. },
  395. titleImage: {
  396. width:'100%',
  397. height:'100%',
  398. flex: 1,
  399. backgroundColor:'transparent'
  400. },
  401. titleQrcodeBonder: {
  402. width:'100%',
  403. height:'100%',
  404. alignItems: 'center',
  405. flexDirection: 'column',
  406. flex: 1,
  407. backgroundColor:'transparent'
  408. },
  409. titleQrcodePlacehold: {
  410. flex: 5,
  411. backgroundColor:'transparent'
  412. },
  413. titleQrcode: {
  414. flex: 6,
  415. width:'100%',
  416. height:'100%',
  417. backgroundColor:'transparent'
  418. },
  419. //layer bottom
  420. bottomLogoBackground: {
  421. flex: 3,
  422. borderRadius:16/PixelRatio.get(),
  423. marginTop: 26/PixelRatio.get(),
  424. marginBottom: 26/PixelRatio.get(),
  425. backgroundColor:'transparent',//'rgba(255,255,255,0.5)',
  426. },
  427. bottomLogo: {
  428. width:'100%',
  429. height:'100%',
  430. backgroundColor:'transparent'
  431. },
  432. bottomQrcode1Background : {
  433. flex: 1,
  434. width:'100%',
  435. height:'100%',
  436. marginLeft: 21/PixelRatio.get(),
  437. paddingTop: 27/PixelRatio.get(),
  438. paddingBottom: 11/PixelRatio.get(),
  439. flexDirection: 'column',
  440. backgroundColor:'transparent'
  441. },
  442. bottomQrcode2Background : {
  443. flex: 1,
  444. width:'100%',
  445. height:'100%',
  446. marginLeft: 21/PixelRatio.get(),
  447. paddingTop: 26/PixelRatio.get(),
  448. paddingBottom: 11/PixelRatio.get(),
  449. flexDirection: 'column',
  450. backgroundColor:'transparent'
  451. },
  452. bottomQrcode1: {
  453. flex: 2,
  454. width:'100%',
  455. height:'100%',
  456. backgroundColor:'transparent'
  457. },
  458. bottomQrcode2: {
  459. flex: 2,
  460. width:'100%',
  461. height:'100%',
  462. backgroundColor:'transparent'
  463. },
  464. bottomQrcode1Str: {
  465. flex: 1,
  466. textAlign :'center',
  467. textAlignVertical:'center',
  468. fontSize: 16/PixelRatio.get(),
  469. color : 'white',
  470. backgroundColor:'transparent'
  471. },
  472. bottomQrcode2Str: {
  473. flex: 1,
  474. textAlign :'center',
  475. textAlignVertical:'center',
  476. fontSize: 16/PixelRatio.get(),
  477. color : 'white',
  478. backgroundColor:'transparent'
  479. },
  480. bottomPlacehold: {
  481. flex: 8,
  482. width:'100%',
  483. height:'100%',
  484. backgroundColor:'transparent',
  485. textAlign :'right',
  486. textAlignVertical:'bottom',
  487. fontSize: 27/PixelRatio.get(),
  488. color : 'gray'
  489. },
  490. //layer content item
  491. contentItem:{
  492. flex: 1,
  493. width:'100%',
  494. height:'100%',
  495. flexDirection: 'column',
  496. backgroundColor:'transparent'
  497. },
  498. contentItemDownLayer:{
  499. position:'absolute',
  500. width:'100%',
  501. height:'100%',
  502. flexDirection: 'column',
  503. alignItems: 'center',
  504. backgroundColor:'transparent'
  505. },
  506. contentItemUpLayer:{
  507. width:210/PixelRatio.get(),
  508. height:153/PixelRatio.get(),
  509. position:'absolute',
  510. backgroundColor:'transparent'
  511. },
  512. contentItemTop:{
  513. flex: 3,
  514. width:'100%',
  515. height:'100%',
  516. paddingLeft: 66/PixelRatio.get(),
  517. paddingRight: 53/PixelRatio.get(),
  518. paddingTop: 40/PixelRatio.get(),
  519. flexDirection: 'row',
  520. alignItems: 'center',
  521. backgroundColor:'transparent'
  522. },
  523. contentItemBottom:{
  524. flex: 1,
  525. width:'100%',
  526. height:'100%',
  527. paddingLeft: 66/PixelRatio.get(),
  528. paddingRight: 53/PixelRatio.get(),
  529. paddingBottom: 40/PixelRatio.get(),
  530. flexDirection: 'row',
  531. alignItems: 'center',
  532. backgroundColor:'transparent'
  533. },
  534. //layer content item top
  535. contentItemTopCoverImg:{
  536. flex: 5,
  537. width:'100%',
  538. height:'100%',
  539. borderRadius:27/PixelRatio.get(),
  540. backgroundColor:'transparent'
  541. },
  542. contentItemTopDetail:{
  543. flex: 6,
  544. width:'100%',
  545. height:'100%',
  546. paddingLeft: 20/PixelRatio.get(),
  547. paddingRight: 20/PixelRatio.get(),
  548. alignItems: 'center',
  549. backgroundColor:'transparent'
  550. },
  551. contentItemTopQrcode:{
  552. flex: 5,
  553. width:'100%',
  554. height:'100%',
  555. backgroundColor:'transparent'
  556. },
  557. //layer content item bottom
  558. contentItemBottomMerchantName:{
  559. flex: 5,
  560. width:'100%',
  561. height:'100%',
  562. alignItems: 'center',
  563. color:"black",
  564. backgroundColor:'transparent',
  565. textAlign :'center',
  566. textAlignVertical:'center',
  567. fontSize: 27/PixelRatio.get(),
  568. fontWeight : 'bold'
  569. },
  570. contentItemBottomPlacehold:{
  571. flex: 6,
  572. paddingLeft: 27/PixelRatio.get(),
  573. paddingRight: 79/PixelRatio.get(),
  574. width:'100%',
  575. height:'100%',
  576. backgroundColor:'transparent',
  577. },
  578. contentItemBottomAction:{
  579. flex: 5,
  580. width:'100%',
  581. height:'100%',
  582. backgroundColor:'transparent',
  583. fontWeight : 'bold',
  584. textAlign :'center',
  585. textAlignVertical:'center',
  586. fontSize: 36/PixelRatio.get(),
  587. color: 'darkgray'
  588. },
  589. // 券的title
  590. contentItemTopDetailTitle:{
  591. flex: 2,
  592. // height:'100%',
  593. width:'100%',
  594. marginTop:"2%",
  595. // borderStyle:"solid",
  596. // borderWidth:1,
  597. // borderColor:"red",
  598. backgroundColor:'transparent',
  599. textAlign :'left',
  600. color:"black",
  601. textAlignVertical:'center',
  602. fontSize: 53/PixelRatio.get(),
  603. },
  604. /*
  605. contentItemTopDetailRemark:{
  606. flex: 1,
  607. width:'100%',
  608. height:'100%',
  609. backgroundColor:'transparent',
  610. textAlign :'left',
  611. textAlignVertical:'center',
  612. fontSize: 27/PixelRatio.get(),
  613. color : 'gray'
  614. },
  615. */
  616. contentItemTopDetailPrice:{
  617. flex: 2,
  618. width:'100%',
  619. height:'100%',
  620. backgroundColor:'transparent',
  621. flexDirection: 'row',
  622. },
  623. // 售价的样式
  624. contentItemTopDetailCurPrice:{
  625. flex: 3,
  626. width:'100%',
  627. height:'100%',
  628. flexDirection: 'row',
  629. backgroundColor:'transparent',
  630. },
  631. contentItemTopDetailCurPriceStr:{
  632. backgroundColor:'transparent',
  633. fontSize:96/PixelRatio.get(),
  634. fontFamily:"PingFangSC-Bold",
  635. fontWeight: "bold",
  636. textAlign :'left',
  637. textAlignVertical:'bottom',
  638. color : 'red'
  639. },
  640. contentItemTopDetailCurPriceStrUnit:{
  641. backgroundColor:'transparent',
  642. textAlign :'left',
  643. textAlignVertical:'bottom',
  644. paddingBottom: 16/PixelRatio.get(),
  645. fontSize: 48/PixelRatio.get(),
  646. color : 'red'
  647. },
  648. // 面额的样式
  649. contentItemTopDetailSalePrice:{
  650. position:"absolute",
  651. bottom:0,
  652. left:0,
  653. // flex: 1,
  654. width:'100%',
  655. height:'30%',
  656. backgroundColor:'transparent',
  657. },
  658. contentItemTopDetailSalePriceStr:{
  659. width:'100%',
  660. height:'100%',
  661. backgroundColor:'transparent',
  662. textAlign :'left',
  663. textAlignVertical:'bottom',
  664. fontSize: 27/PixelRatio.get(),
  665. textDecorationLine: 'line-through',
  666. color : 'gray'
  667. },
  668. });