getcodex
V2EX  ›  React

react-native 豆瓣电影的小 demo

  •  
  •   getcodex · Nov 16, 2016 · 2867 views
    This topic created in 3529 days ago, the information mentioned may be changed or developed.

    项目地址: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 谢谢

    No Comments Yet
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   972 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 20:08 · PVG 04:08 · LAX 13:08 · JFK 16:08
    ♥ Do have faith in what you're doing.