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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3456 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

第 1 条附言 · 2015-06-06 20:16:04 +08:00

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

第 2 条附言 · 2015-06-08 08:58:15 +08:00

官方的Top 10 大坑：

React

native

现阶段

19 条回复 • 2015-06-08 17:08:55 +08:00

66450146

2015-06-06 15:30:36 +08:00

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

crazyxin1988

2015-06-06 16:34:47 +08:00

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

dementrock

2015-06-06 16:45:02 +08:00 via Android

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

lht91225

2015-06-06 16:47:55 +08:00

同问，有那些坑呢？

skyline75489

2015-06-06 17:38:05 +08:00

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

dementrock

2015-06-06 20:34:02 +08:00

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

dementrock

2015-06-06 20:34:28 +08:00

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

openroc

2015-06-06 22:20:15 +08:00

直接进坑观摩~

tamamaxox

2015-06-07 11:25:59 +08:00

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

skyline75489

2015-06-07 11:50:58 +08:00

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

skyline75489

2015-06-07 11:57:59 +08:00

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

xylitolLin

2015-06-07 18:31:25 +08:00

@tamamaxox

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

tamamaxox

2015-06-07 19:15:37 +08:00

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

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

tamamaxox

2015-06-07 19:19:05 +08:00

@xylitolLin

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

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

angkec

2015-06-07 20:28:39 +08:00 via Android

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

skyline75489

2015-06-07 20:49:06 +08:00

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

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

skyline75489

2015-06-07 20:49:53 +08:00

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

hpze2000

2015-06-08 16:22:45 +08:00

楼主这个坑帮我看看啥问题。
$ 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

2015-06-08 17:08:55 +08:00

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