react-native 豆瓣电影的小 demo

2016-11-16 16:51:33 +08:00
 yuanchao

项目地址:https://github.com/yccphp/react-native-demo

介绍

最近在研究 react-native 做了一个小 demo

感觉文档上还是有点坑的,比如 触摸事件的时候,文档会告诉你这样写

class MyButton extends Component {
  _onPressButton() {
    console.log("You tapped the button!");
  }

  render() {
    return (
      <TouchableHighlight onPress={this._onPressButton}>
        <Text>Button</Text>
      </TouchableHighlight>
    );
  }
}

但是其实你的 onPress 如果不用 .bind(this) 的话,你是取不到 this 的一些数据的,所以我就把这个 demo 放到了 github

我也才研究了两天,代码可能写的有点乱,大家凑合着看哈~

实现的功能有

  1. 按评分排序的 20 门电影
  2. 查看电影详情

用到了以下基础知识

  1. 组件
  2. state
  3. flexbox
  4. ListView
  5. 网络请求
  6. 页面跳转
  7. 触摸事件

在接下来的学习中,我会继续完善这个 demo 如果你有好的想法,欢迎与我沟通

演示

相关资料

我是做 PHP 的,从开始到现在的 demo 用了三天,以下是我的学习路径与资料

学习路径

ES6->React->React-Native->Redux

学习资料

参考阮一峰的快速入门大纲:http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html

进阶: ADVANCED GUIDES :https://facebook.github.io/react/docs/hello-world.html

React Native :http://reactnative.cn/docs/0.37/getting-started.html

Redux 中文文档:http://cn.redux.js.org/docs/api/index.html

另外,你们有没有比较好的学习资料,跪求分享

如果这个项目给你带来了帮助,或者鼓励我,请 star 谢谢

2226 次点击
所在节点    React
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/320962

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX