发表于 | 分类于 |

按照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包.

发表于 | 分类于 |

  • 目录

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

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

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

阅读全文 »

发表于 | 分类于 |

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

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

科比：“不干嘛！”谈话结束了！

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

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

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

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

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

阅读全文 »

发表于 | 分类于 |

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 中使用的尺寸单位是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代码的可重用度极高，一般来说在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可以复用已经写好的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的实际开发过程中，会遇到各种各样的问题，有时候花了一段时间去解决完一个问题之后，过了很久可能会又遇到了，由于当时没有记录与总结，所以很可能忘了，然后只能继续去踩坑了，虽然踩坑的速度要比之前快些，但总是费事，所以我将我遇到的问题作一个记录，一个是方便自己查看，另一个希望给有遇到过相同或者相似问题的童鞋一点帮助

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同步远程仓库时候，我的做法是先克隆远程仓库，然后将需要上传的代码拷贝进去，接着是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 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