V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yuanchao
V2EX  ›  React

react-native 豆瓣电影的小 demo

  •  
  •   yuanchao · 2016-11-16 16:51:33 +08:00 · 2249 次点击
    这是一个创建于 2953 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4910 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 05:40 · PVG 13:40 · LAX 21:40 · JFK 00:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.