zoukankan      html  css  js  c++  java
  • 我的第一个React Native App

    我用了三天时间实现了一个相对比较完整的React Native 新闻发布类型的示例。应用做得很简单,但大多React Native的组件都有用到,今天做一个分享(由于我电脑是Windows系统,所以只实现了Android部分,没有对iOS做兼容),希望对初学者有用处。

    实现界面

      

      

    PS:页面实现不多,数据也是静态。

    安装启动程序

    看完上面的,可以直接到我的Github下载源码在本地跑起来,我这个示例的地址是:

    https://github.com/codingforme/react-native-demo-news

    1. 下载源码

    可以用git clone或直接下载zip包,注意存放路径不要有中文,否则命令执行会出错。

    2. 安装node module

    进入工程目录安装node module,命令行:

    npm install

    3. 安装示例

    插上真机或开模拟器来安装示例,命令行:

    react-native run-android

    这样就可以在手机上看到示例效果,可以结合代码学习React Native的开发套路。

    PS:这里是我假设你已经装好React Native的开发环境。

    额外组件

    有些组件官方没有提供(没有Android版或者本身没有),于是我在Github寻找了相应的UI组件来使用,分别有:

    1. Tab组件(底部导航):react-native-tab-navigator

    https://github.com/exponentjs/react-native-tab-navigator

    2. ActionSheet菜单组件:react-native-actionsheet

    https://github.com/beefe/react-native-actionsheet

    3. 下拉刷新、加载更多列表组件 :react-native-gifted-listview

    https://github.com/FaridSafi/react-native-gifted-listview

    4. 滑动Tab组件:react-native-scrollable-tab-view

    https://github.com/skv-headless/react-native-scrollable-tab-view

    PS:没有什么就上Github找,非常方便。

    关键代码
    1.  页面跳转,Navigator组件使用部分。
    2.  Android硬件的back键操作
    3.  Android状态栏沉浸式的设置
    PS:不做代码解析,可直接查看代码,比较简单。

    总结

    我很喜欢React Native的开发方式,将页面变为一个个小组件,嵌套而成大组件,从而形成整个应用,它组件化的思想,让我真正粉上了它。

    如果迫于混合应用(Hybrid App)的效果差,又没有人手做原生的应用的,真的可以考虑用它。

    本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

    本文地址 :http://www.cnblogs.com/lovesong/p/5678056.html

  • 相关阅读:
    5.Longest Palindrome substring
    3. Longest Substring Without Repeating Characters
    1.Two Sum
    2.Add two Numbers
    oplog
    airflow笔记
    airflow
    grpc protobuf
    modbus
    Linux 工具,一本好书 大牛的博客
  • 原文地址:https://www.cnblogs.com/lovesong/p/5678056.html
Copyright © 2011-2022 走看看