react-native 豆瓣电影的小 demo

项目地址: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 如果你有好的想法,欢迎与我沟通

演示

tmpdir--16_11_16_16_36_20.gif

相关资料

我是做 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 谢谢

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值