• 初识reactnative


    一、安装和部署

    1、一手资料来自于官网的Getting stated,对于新手来说,看见这句话无疑是最开心的了

    https://facebook.github.io/react-native/docs/getting-started.html#content

    2、然后参照 tutorial 学会用 react-native 搭建你的第一个应用:

    https://facebook.github.io/react-native/docs/tutorial.html#content

    3、学习源码

    https://github.com/facebook/react-native

    虽然官网有很多讲解,但是想学明白,看源码模仿 example 是最直接有效的,github 上给出了运行 example 的方式

    但是要注意在运行 example 的时候有一些坑,是 npm install 之后,要想运行成功./packager/packager.sh,我遇到了很多阻碍,总结来说,就是很多依赖包并不能直接下下来,建议哪出错解决哪,大概遇到的问题有:

    1)需要 ndk,版本必须是10,我开始用的11,总是编译不过去,具体说明见

    https://facebook.github.io/react-native/docs/android-building-from-source.html

    官网说用10,就用10,不要换版本,至于10c 还是10e 都行

    2)有些依赖包可以提前下好放到指定的位置上

    二、概述

    react-native 是一个移动 web 的 ui框架,使用 react技术,提供了一系列常见组件,有些组件是通用在 android 和 ios上,有些是特有的。

    三、使用方式

    react-native 提供的各组件其实就是react 的 component,但是兼顾了移动端的操作特性,区别于常见 web 端的组件,例如下拉框,支持弹出式。viewpagerandroid,模仿原生的 viewpager 的形式。

    每种组件均提供了若干属性,总的来说包括:

    1)描述外貌的

    2)描述位置的

    3)描述动作的

    4)描述子组件的摆放位置的

    等等

    其中1)可以内置 style 的形式来描述,例如

    也可以写在 stylesheet 中,例如

    四、学习路线

    1、要掌握 react-native 一定要学会 react,因为他的本质还是一套 js框架,并且遵循 react 的特性,例如 props、state的使用,各生命周期的使用

    2、结合案例使用各组件,了解各组件能实现什么不能实现什么,以便以后在项目中因地制宜

    3、掌握调试方式,启动方式等

    4、学会在 android 中定义组件,在 web 中使用,因为 app 不可能完全靠移动 web,所以需要 native 和移动 web 配合使用,涉及到交互、数据的传递等具体事宜,在使用中发现问题、解决问题

    五、案例解析

    UIExplorer 是所有组件的使用案例,把刚才 example 的执行语句

    ./gradlew :Examples:Movies:android:app:installDebug

    替换成

    ./gradlew :Examples:UIExplorer:android:app:installDebug

    就会在设备上安装一个应用,如图,图中圈出了三个应用,右边两个分别是 example 提供的,最左边这个就是 tutorial 指导下创建的第一个应用。

    真机上需要配置访问地址,否则无法获取目标 web 页,会有红色的提示,配置方式:

    有菜单键的手机点击菜单键,没有菜单键,摇晃手机,界面如图

    第一个 Reload JS:当每次修改 js 代码的时候,点击这个就相当于刷新页面了,不需要执行命令行重新编译。

    最后一个 Dev Settings:设置 ip 和端口号,如图

       

    原理就是,android 应用加载了一个 web 页面,所有的逻辑都在这个 web 页面上,通往 web 页面的通道就是这个 ip 的设置,每次加载完 应用,会对当前页面记录下来,下次打开应用会显示当前的状态,只有再次进行页面的访问才会再通过网络,如果此时网络不好,依然会显示一个红色的提示页面。

    一切就绪后,就会看见UIExplorer了,列出了所有的组件列表

      

    对应于源码的目录基本可以从类名上找到想看的源码,例如 ImageExample,他把所有的案例都存在一个 examples 的 json 数组中了,描述了标题、说明、内容等主要信息

    在 createExamplePage页中会统一对这种页面进行加载

    入口是根目录下的UIExplorerApp.android.js

    侧边栏是导航,内容是内容页

    DrawerLayoutAndroid 是 RN 提供的组件,模仿 android 原生的滑动菜单的形式,而主屏中的页面作为这个组件的内容:

    this._renderApp()

    通过这个入口就可以自己往下看往下分析了,具体的组件单独看独立的源码即可。

  • 相关阅读:
    Sublime Text配置Python开发利器
    Python字符进度条
    安装和使用的django的debug_toolbar
    Python数组合并
    django创建项目
    Python的闭包
    Python获取对象的元数据
    Python的枚举类型
    Django的Model上都有些什么
    Git使用相关
  • 原文地址:https://www.cnblogs.com/juice/p/react_native.html
Copyright © 2020-2023  润新知