react-native 豆瓣电影的小 demo

前端之家收集整理的这篇文章主要介绍了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 如果你有好的想法,欢迎与我沟通

演示

相关资料

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

猜你在找的React相关文章