美文网首页
React Native 上手

React Native 上手

作者: 浅颜如梦 | 来源:发表于2019-04-28 03:33 被阅读0次

    [TOC]

    环境安装

    推荐直接查看官网,介绍的很详细,嫌门槛高,那就React Native 中文网

    开发工具

    IDE建议使用VS Code,比较轻量级,插件想装就装,插件当然首选React Native Tools,建议下载好后,搜索安装。

    安装好VS Code后,可以了解几个常用的快捷键

    Alt + Shift + F 格式化
    Ctrl + [ 选中内容缩进向左移动
    Ctrl + ] 选中内容向右移动
    Ctrl + C 复制当前行
    Ctrl + V 粘贴复制的内容
    Ctrl + X 剪贴当前行
    Ctrl + / 行注释
    Ctrl + F 查找
    Ctrl + H 替换
    Alt + Shift + A 块注释
    Alt + ↓ / ↑ 向上/向下移动行
    Ctrl + K Ctrl + 0 (Ctrl + K + 0) 全局方法折叠
    Ctrl + K Ctrl + J (Ctrl + K + J) 全局方法展开
    Ctrl + Shift + [ 当前块折叠
    Ctrl + Shift + ] 当前块展开

    调试可以使用模拟器,百度搜索可以显示一大堆,建议还是使用系统模拟器,下载Android Studio会自带,有条件的就使用真机吧

    常用命令

    开发之前先了解几个常用到的npm命令

    npm list -g --depth 0   //查看已安装的包
    npm i 'name' / npm install 'name'   //安装
    npm i -g 'name'     //升级
    
    Ctrl + M    //打开模拟器调试选项
    adb shell input keyevent 82 //通过命令行打开模拟器调试选项
    

    导入项目

    项目下载好后,通过命令行进入目录
    npm install     //安装项目依赖
    npm rm -rf node_modules //强制删除node_modules文件夹
    npm rm -rf node_modules && npm install  //上两者的结合
    

    引入依赖

    npm install --save react-native-webview     //引入webview控件
    react-native link react-native-webview      //关联webview,某些需要原生支持,故需要添加link
    

    了解

    把环境安装好,先按照提示,写个Hello,World!练练手

    建议先把入门基础按照提示比对敲完,这时大致对react语法有个认识

    React基于ES6,那就好了,咱们找个简答的教程菜鸟教程,赶紧熟悉下

    啥,你说ES6教程这么简答,那是怕打消你的自信心,来给你个复杂的教程ECMAScrip 6 入门,这个文档可能有点复杂,看不完也别怕,后续咱们可以直接项目了解

    这个时候,因为对应用还不了解,暂不建议你看官网的进阶指南和使用指南

    上手

    如何上手快,当然是跟着项目一起做喽,这里推荐一位大神的教程,如果视频找不到,建议翻翻教程里的评论,视频教程只有几章,花上一周时间,完全可以跟着视频敲出来。

    当然,因为视频录制的比较早,可能某些控件已被官方废弃,引入方式发生变化,需要在导入的时候注意,为避免弯路,这里给出对部分已废弃控件的导入方式,见文末。同时,如果原教程的项目源码不能够正常安装,这里给出一份最新代码,可以参考,点这里,下载运行查看效果就是了,如果不知道怎么安装,请查看上面导入项目介绍。

    项目中后续会有其他的小demo,有时间会一直更新。

    跟进

    如果你跟着教程已经完整的敲了一遍,那么恭喜你,你会发其实具体和原生开发差不多,无非就是控件名称和事件的不一致,坚持做下去就会了解了。

    这个时候,估计你会对react的其他控件有些好奇,建议把官网上的进阶指南和使用指南完整的看上一遍,再找个简单的项目,上手试试。

    再项目里会经常遇到各种控件的导入和使用问题,经常性的报错,建议能够耐住性子看下去,一般日志里回有提示。

    还有控件的link和使用问题,最好不要一上来就去找教程,可以试着到node_modules里找到该项目引用,一般readme里会有使用介绍,或者看源码暴露出的属性和方法,要么就去到github上找到该库,看看作者的具体介绍,这样能更好的理解控件的用法,以避免拾人牙慧。

    AsyncStorage引入
    npm install @react-native-community/async-storage --save
    react-native link @react-native-community/async-storage
    
    WebView引入
    npm install react-native-webview --save
    react-native link react-native-webview
    
    Navigator引入
    npm install react-native-deprecated-custom-components --save
    
    PropTypes引入
    npm install --save prop-types
    
    TabNavigator引入
    npm install --save react-native-tab-navigator
    

    相关文章

      网友评论

          本文标题:React Native 上手

          本文链接:https://www.haomeiwen.com/subject/iwlrnqtx.html