Ye Wei's blog

所见、所感、所想


  • 首页

  • 分类

  • 归档

  • 标签

React Native 签名打包Android

发表于 2018-01-02 | 分类于 技术 |

按照React Native官方的5步曲:

  1. 在终端里面,cd 到项目的根目录后.执行下面这行命令:
1
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

然后终端就会让你输入口令等信息. 如:

  1. 执行第一步会在根目录下会生成一个XXXXXX.keystore的文件,直接拿到android/app下.

  1. 在android/gradle.properties中加入:
1
2
3
4
5
6
7
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore

MYAPP_RELEASE_KEY_ALIAS=my-key-alias

MYAPP_RELEASE_STORE_PASSWORD=******

MYAPP_RELEASE_KEY_PASSWORD=******

**换为你刚才输入的口令.

  1. 在android/app/build.gradle添加下面的红色字.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
def enableProguardInReleaseBuilds = true

android {
...
defaultConfig {
....
}
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}}
splits {
....
}
buildTypes {
release {
signingConfig signingConfigs.release
...
}
}
.....
}
}
}
}
  1. 终端cd 到android目录下.执行命令
1
./gradlew assembleRelease

等一下终端执行后显示BUILD SUCCESSFUL.

成功打好了.在项目的android/app/outputs/apk下可见刚才打好的apk包.

在 Chrome 里用「Alfred」是什么体验?Steward 把效率启动器带进了浏览器

发表于 2017-12-15 | 分类于 工具 |

  • 目录

说到启动器,最有名的当属 Mac 上的神器 Alfred ,以及 Windows 上的 Wox。那什么是启动器呢,它是由一个命令输入框,以及一个查询结果下拉列表组成。只需要一个命令就能让电脑去完成一系列操作,如同你的管家一样,自然是很多人心目中的神器。

比如我输入 Chrome 然后回车,启动器会自动帮我找到 Chrome 并打开它;又如遇到命令 yd steward 后,启动器立刻去查询有道词典然后把 管家 的释义列出来。

而 Steward 便是 Chrome 浏览器里的类 Alfred 启动器,在某些方面甚至是 Alfred Plus。

阅读全文 »

效率神器之Dash — 代码片段管理和Api文档浏览

发表于 2017-12-14 | 分类于 工具 |

有程序员问科比:“科比,你为什么如此成功?”
科比反问程序员:“你知道洛杉矶每天凌晨4点的样子吗?”

程序员:“知道,那个时候我一般还没下班。你问这个干嘛?”

科比:“不干嘛!”谈话结束了!

程序员比科比还努力,努力的敲代码,努力的修bug,努力的学习翻阅API。

对于大多数国内的程序开发者来说,当我们遇到了一个新的功能不知道怎么解决的时候,有那么一句话自然而然的浮现在脑海中:“内事问百度,外事问谷歌!”。于是乎打开我们的浏览器,开始搜索我们想要的东西。但是,在搜索的过程中,大多是时候出现新的类或者方法让我们摸不清头脑,不知道这个类或者方法是干嘛的,这个时候 API 是最权威的解释工具。

查呗。对!我们每天都会查看不同的 API 文档,不停的在编辑器和文档之间切换,而且有时候 API 文档的打开速度真的让我们愤怒并无奈着!

别急,读了这篇文章之后你不需要再继续无奈下去!

言归正传,我们今天来介绍一款非常好用的 Mac 小工具:Dash

阅读全文 »

Immutable 详解及 React 中实践

发表于 2017-08-11 | 分类于 技术 |

Shared mutable state is the root of all evil(共享的可变状态是万恶之源)

– Pete Hunt

有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了。这些至少说明 Immutable 是很有价值的,下面我们来一探究竟。
JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2 。虽然这样做可以节约内存,但当应用复杂后,这就造成了非常大的隐患,Mutable 带来的优点变得得不偿失。为了解决这个问题,一般的做法是使用 shallowCopy(浅拷贝)或 deepCopy(深拷贝)来避免被修改,但这样做造成了 CPU 和内存的浪费。

Immutable 可以很好地解决这些问题。

阅读全文 »

React native 分辨率适配

发表于 2017-07-24 | 分类于 技术 |

React Native 中使用的尺寸单位是pt,是一个绝对长度,而设计师使用的是px, 这两种尺寸如何换算呢?官方提供了 PixelRatio:

1
2
3
import {PixelRatio} from 'react-native';
const pt2px = pt=>PixelRatio.getPixelSizeForLayoutSize(pt);
const px2pt = px=>PixelRatio.roundToNearestPixel(px);

设计师给你一个尺寸,比如100px*200px的View,按照下面的方式可实现设计还原:

1
<View style={{width:px2pt(100),height:px2pt(200),backgroundColor:"red"}}/>

这个时候,你或许会说,这也太麻烦了,每个有尺寸的地方我都得转么,能不能我直接用px写,当然可以,不过需要整体加个缩放系数:

1
2
3
4
5
6
7
8
import {PixelRatio,Dimensions}} from 'react-native';
const pt2px = pt=>PixelRatio.getPixelSizeForLayoutSize(pt);
const px2pt = px=>PixelRatio.roundToNearestPixel(px); let pxRatio = PixelRatio.get();
let {win_width,win_height} = Dimensions.get("window"); let scale = 1/pxRatio;
let width = pt2px(win_width);
let height = pt2px(win_height);
const com = props=>( <View sytle={styles.container}> <View style={{width:100,height:200,backgroundColor:"red"}}/> </View>) const styles={ container: { width:width, height:height, transform:[{translateX:-width*.5}, {translateY:-height*.5}, {scale:scale}, {translateX:width*.5}, {translateY:height*.5}] },
}

这样处理后,在根节点内,你再也不用考虑pt的问题了,直接使用px即可。

不过此时还有另外一个问题,设计尺寸是死的,屏幕大小是活的,得考虑分辨率适配啊,那在不同的分辨率下如何正确的实现设计师的设计呢?

阅读全文 »

React Native Android 与 IOS的适配

发表于 2017-05-20 | 分类于 技术 |

React Native代码的可重用度极高,一般来说在90%以上,即Android, IOS可共用一套代码,不过还是有些地方需要对两个平台的适配作一个处理的,例如顶部导航栏的高度、阴影效果的处理等等,需要我们对官方提供的组件或者是两个平台的运行效果有一定了解

导航栏的高度

ios: 44

android: 50

状态栏的高度

ios: 20

android: 0

阴影效果(样式)

ios: shadowOffset, shadowRadius

android: elevation

ListView中的RefreshControl(刷新器)的颜色

ios: tintColor

android: colors

在React Native中用WebView打开非HTTPS的的站点

发表于 2017-05-17 | 分类于 技术 |

在React Native应用中使用WebView可以复用已经写好的web页面。

在如果我们的应用在IOS9或者更高的版本中使用WebView尝试连接任何的HTTP服务,将会请求失败,也就不能成功地载入web页面,因为HTTP服务不支持最新的SSL技术

让我们看一下这个以下操作。这里我们尝试在WebView中访问HTTP的站点

1
2
3
4
5
6
7
<WebView
contentInset={{ top: -50 }}
startInLoadingState={true}
source={{ uri: 'http://movie.douban.com/subject/25862357/' }}
//source={{ uri: this.props.url }}
style={styles.webView}
/>

在IOS9.0或者更高的环境下,在iPhone模拟器中运行应用,将会出现错误信息

1
2
3
4
5
6
Error Loading Page
Domain: NSURLErrorDomain
Error Code: -1022
Description: The resource could not be loaded because
the App Transport Security policy requires the use of a
secure connection

理想情况下,这个站点会尝试去连接HTTPS服务。然而,该站点HTTPS服务可能没有被启用或者不支持。

例如,我们在开发app的过程中,可能会想要去连接HTTP的服务。

阅读全文 »

React Native问题集锦及解决方案

发表于 2017-05-16 | 分类于 技术 |

在React Native的实际开发过程中,会遇到各种各样的问题,有时候花了一段时间去解决完一个问题之后,过了很久可能会又遇到了,由于当时没有记录与总结,所以很可能忘了,然后只能继续去踩坑了,虽然踩坑的速度要比之前快些,但总是费事,所以我将我遇到的问题作一个记录,一个是方便自己查看,另一个希望给有遇到过相同或者相似问题的童鞋一点帮助

TextInput获得焦点时,模拟器不出现键盘

需要勾选Hardware -> Keyboard -> Toggle Software keyboard

路由跳转的时候,会出现透明的背景色,看起来很不协调

可以给组件添加一个背景色

导入第三方组件react-native-scrollable-tab-view的时候报错,后来发现是版本依赖的问题

安装react-native-scrollable-tab-view的时候指定它的版本为0.7.0,即

1
npm install --save react-native-scrollable-tab-view@0.7.0

Android 不支持 GIF格式的图片

Android 默认是不支持加载GIF的,需要在android/app/build.gradle中添加一些依赖模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
compile 'com.facebook.fresco:animated-base-support:1.3.0'

// For animated GIF support
compile 'com.facebook.fresco:animated-gif:1.3.0'

// For WebP support, including animated WebP
compile 'com.facebook.fresco:animated-webp:1.3.0'
compile 'com.facebook.fresco:webpsupport:1.3.0'

// For WebP support, without animations
compile 'com.facebook.fresco:webpsupport:1.3.0'
}

重新编译,可以看到GIF成功加载了

如何初始化本地git项目,并将其添加到远程仓库

发表于 2017-05-16 | 分类于 技术 |

一开始不会使用git同步远程仓库时候,我的做法是先克隆远程仓库,然后将需要上传的代码拷贝进去,接着是commit, push的常规流程。这在实际开发过程中很不友好,于是我就记录一下一个友好的操作步骤

初始化本地仓库

1
git init

添加项目描述

1
git add README.md

提交本地代码到本地仓库

1
git commit -m "first commit"

将本地仓库关联到远程仓库, 其中仓库地址是你新创建的仓库地址

1
git remote add origin https://github.com/weiTimes/ReactNativeDayAndDay.git

将本地仓库的代码更新到远程仓库

1
git push -u origin master

刷新新创建的远程仓库的页面地址,可以看到刚才提交上来的文件,如果发现只有README.md, 需要回到项目根目录,进行常规的git commit … 、git push ...等操作。

react-native 版本升级与降级

发表于 2017-05-15 | 分类于 技术 |

前言

现在React Native For Android刚刚开源才不久,现在整体功能还不健全完善以及开发中的坑(Bug)还是比较多的 ,以至于到现在还没有正式版本。项目人员正在加紧开发维护,修复Bug,所以现在React Native项目的版本更新速度还是相对来讲是比较快的。在如此现状之下,我们就要及时关注项目官网了,要将React Native往新版本进行更新,这样我们可以去使用更多的APIs,视图Views,以及开发者工具以及其他一些好用的东西。

我们大家都知道一个React Native项目使用Android项目,iOS项目和JavaScript项目三部分进行组成的,而且三者都关联打包在npm包内的,所以该项目版本进行更新是比较繁琐的。下面我来给大家讲解一下React Native项目的升级步骤。

更换React Native版本

查看本地React Native 版本

  • 首先我们需要查看本地的React Native的版本,命令行输入如下命令:
1
react-native --version
  • 进入创建的React Native主目录,然后执行 react-native –version就可以看到react-native-cli和react-native的版本号

查看npm包管理的React Native 版本

  • 通过命令行查看React Native版本
1
npm info react-native

更换版本

打开项目中的package.json文件,找到dependencies字段,把react-native的版本修改为想要更换的版本

切换到项目主目录,执行

1
npm install

如安装成功,查看当前版本

1
react-native --version

更新项目templates

版本不同,构建的项目模板也会发生变化,所以在更新了React Native版本之后,也要及时更新项目模板

1
react-native upgrade

在更新templates的过程中,会进行文件修改检查,选择覆盖还是保留原文件,需要根据实际情况选择是否覆盖,其中有三点原则

  • 如果是新添加的文件,会进行直接创建
  • 如果更新文件与原文件相同,直接忽略跳过
  • 如果更新文件和当前项目文件不同,有冲突情况,会询问开发者选择覆盖还是保留原文件,需要看实际情况

到这里就完成了版本的更换了,在项目根目录运行react-native run-ios或react-native run-android看看有没有问题吧!
另外,在初始化React Native的项目时,如需要指定某个版本,可以输入以下命令,其中–version配置的是版本号

1
react-native init HotCodeGithub --verbose --version 0.40.0

12
Ye Wei

Ye Wei

一名懒惰的Coder兼理想主义者。懒惰 -「驱使你极力努力以减少精力的总的消耗的美德」

16 日志
3 分类
13 标签
RSS
GitHub 微博
© 2017 - 2018 Ye Wei
由 Hexo 强力驱动
主题 - NexT.Pisces