Deck —— 使用 React Native 实现的 Github 客户端

爱意满满的作品展示区。

This topic created in 4175 days ago, the information mentioned may be changed or developed.

项目地址： https://github.com/skyline75489/Deck

目前还在开发中，就实现了截屏展示的几个功能。

顺便吐槽一下 React Native，现阶段 React Native 还是太不成熟了，有很多坑真的是只有自己踩过才知道。。。

Supplement 1 · Jun 6, 2015

看来大家对开发过程中遇到的坑比较感兴趣，写了一篇文章供大家参考： https://skyline75489.github.io/post/2015-6-6_react-native-deck-for-github.html

Supplement 2 · Jun 8, 2015

官方的Top 10 大坑：

React

native

现阶段

19 replies • 2015-06-08 17:08:55 +08:00

66450146

Jun 6, 2015

听楼主这么说我就放心了，还好新的项目没直接上……

crazyxin1988

Jun 6, 2015

不知道 android版本的react native会是啥样子。
满满都是坑哈哈

dementrock

Jun 6, 2015 via Android

lz可以介绍下具体遇到过哪些坑吗？主要集中在什么方面呢？

lht91225

Jun 6, 2015

同问，有那些坑呢？

skyline75489

Jun 6, 2015

@dementrock 简单说一个吧，我两次试着升级 React Native ，升完都崩了。。。

dementrock

Jun 6, 2015

@skyline75489 具体是升级前后版本不兼容吗？还是新版本引入了更多bug？
我们团队自己也在做类似RN的框架，希望能尽可能地了解潜在的坑会是在什么方面。

dementrock

Jun 6, 2015

@skyline75489 哈刚看到附言研究一下

openroc

Jun 6, 2015

直接进坑观摩~

tamamaxox

Jun 7, 2015

看了文章，有些地方明明就是lz没有理解透reactjs的原理，例如第二个<TouchableOpacity onPress={this.handlePress()}>
就应该写成<TouchableOpacity onPress={this.handlePress}>

skyline75489

Jun 7, 2015

@tamamaxox 我确实是初学 React，有些地方理解还不够深刻。这个地方只是举个例子，因为后面是需要传参的，这里就写了一个传空参数的。我也求教一下，如果需要传参的话，应该怎么写比较好？

skyline75489

Jun 7, 2015

@tamamaxox 我试了一下，换成 this.handlePress 也是会报错的，不过之前是在加载的时候就报，现在改成了在点击之后报。

xylitolLin

Jun 7, 2015

@tamamaxox

我也想请教一下，如果这个handle函数是要传参的，要怎么写才是 “理解透reactjs的原理” 的写法

tamamaxox

Jun 7, 2015

@xylitolLin 真要传参数可以把handlePress写成

handlePress(params){
//...
return function(){
..
}.bind(this);
}

tamamaxox

Jun 7, 2015

@xylitolLin

然后：
<TouchableOpacity onPress={this.handlePress(params)}>

但是我觉得react的设计不需要到传参的情景吧

angkec

Jun 7, 2015 via Android

写成 onPress={function(){this.handlePress()}}?

skyline75489

Jun 7, 2015

@tamamaxox 一般的 ListView 每个 Row 点进去是另一个 View，这个 View 知道自己要往哪里去，写自己的 handlePress 就可以了，不需要传参。

传参这个主要是在时间线上要用到，一个时间线上可能提到用户，也可能提到仓库，比方说 xxx star 了 xxx 仓库，这种就坑爹了，一个 Row 里有两个 Touchable 需要处理，只能通过传参解决。

skyline75489

Jun 7, 2015

@angkec 现在看来写成匿名函数的写法是可行的，看起来也比较简洁。我已经改成匿名函数的写法了 https://github.com/skyline75489/Deck/blob/master/App%2FComponents%2FEventRow.js#L54

hpze2000

Jun 8, 2015

楼主这个坑帮我看看啥问题。
$ react-native init AwesomeProject
This will walk you through creating a new React Native project in /Users/johnson/AwesomeProject
npm WARN engine [email protected]: wanted: {"node":"~0.10"} (current: {"node":"0.12.4","npm":"2.10.1"})

[email protected] install /Users/johnson/AwesomeProject/node_modules/react-native/node_modules/ws
(node-gyp rebuild 2> builderror.log) || (exit 0)

初始化项目的时候，一直卡在那，是需要翻墙么？？

skyline75489

Jun 8, 2015

@hpze2000 这就是在 Build 啊，确实挺慢的，就等会儿呗