React-native入门及配置

Ymc 2019-07-13 00:00:00 22 Page View 22.7'm Read Time ReactNative持续更新
继Mac上手一段时间后,在新电脑环境上进行了一些XJB操作,熟悉了一些快捷键的操作,和一些用到的环境重新搭建,ReactNative就是其中之一,在mac上重新撸了下,发现之前的都忘了好多,code这东西,真的使用和实战很重要哦~,最后吹下mac,真的是用了就不想回去window了,虽然手上这台性能有点差,是不是发个脾气,单就冲这个触摸板我还能吹~~

演员的自我修养之带你学RN

你可以想象RN就是在react+ES6的基础上融入小程序自定义的标签节点的一种开发流程,其内部会将我们编写的RN代码,转义到android 以及 ios的文件目录中,就像官方说的,一次编译多端使用

环境搭建

官网环境搭建api

环境依赖node @8.2+ / yarn(推荐)Pythoon2.xJDK 1.8.0( 下载地址 )、android studio(下载地址)

IOS

前提条件 MAC、Xcode、cocoaPods(Ios资源库管理工具)

  1. mac、Xcode,有mac,Xcode安装就行主要是识别原生ios项目的目录结构
  1. cocoaPads 的安装和基础使用

         sudo gem install cocoapods //安装
    
         gem sources --remove https://rubygems.org/ 
         gem sources -a http://ruby.taobao.org/
         gen sources -l          //跟新镜像源
                                 // 出出现如下说明成功
                                 // *** CURRENT SOURCES ***
                                 // http://ruby.taobao.org/
    
         pod install             // 在对应ios项目中下载ios资源库
    
         如上可能会可能出现一些问题,问题一般是pod 本地和远端的版本不一致导致的,一般第一次装ios环境的时候都更新下远端资源,执行如下
    
         pod repo update
    
         但是由于pod的镜像在外网同样比较慢,理所当然的切换个镜像
         [清华大学开源镜像](https://mirrors.tuna.tsinghua.edu.cn/help/CocoaPods/)
    
         cd ~/.cocoapods/repos 
         pod repo remove master
         git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master
    
         文档要求在工程中`podFile`文件中添加对应的镜像源
    
         source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'
    
    
  2. 编译和运行

    这里的坑就比较多了,很多自己也没完全理解,简单记录下自己遇到的吧

    1. 正常情况下编译一次后期改动ios的逻辑代码会很快的...
      但是修改了宏定义#define、等一些需要编译成字节码的code都将触发,==慎重==

    2. 开发账号的问题:一般纯rn项目对开发账号应该是没有什么要求的,注册一个apple id即可,并在build - project 中选定对应的开发账号点击 编译按钮即可,如果是一些特殊的ios应用里面比如用到了一些消息通知的模块,对账号有一定的要求的,需要对应的,企业账号,或者将对应的功能删除 ==切记==

Java

前置条件 JDK(1.8版本),Android—studio, SDK Merage

小结:环境搭建可能会遇到的问题

==注意点==:

  1. JDK && SDK 的环境变量配置(安装位置无要求,但是==环境变量中文件路径需对应==)
  2. android studio(其实我们只是需要他的SDK,以及虚拟机) 按照提示按照,注意==adb和360手机助手端口冲突的问题,以及使用虚拟机提示需硬件加速==,需安装 SDK Manager -> SDK Tools -> Inter x86 Emulator Accelerator (HAXM installer)以支持硬件加速
  3. 尽量使用yarnnpm安装的时候会有莫名的问题
  4. 真机连接的时候如果检测不到真机的时候,可能是和一些手机连接助手有关,将助手关闭并撤销usb调试
  5. 同时连接的设备只能是一个(包括模拟器)
  6. RN中==引用字体库文件==react-native-vector-icons的时候将需要在名字前加md-orios-的前缀 解决方案

==环境搭建中遇到的问题==(MAC/Windows,存在版本和电脑环境等多方面因素):

####

1. npm ERR! Unexpected end of JSON input while parsing near '...false,"publish_time":'

        产生原因:npm 安装模块的缓存问题

        解决方案:执行`npm cache clean --force`然后执行npm命令,或者直接使用`yarn,react-native`推荐的方式进行开发

2. error: bundling failed: Error: Unable to resolve module `AccessibilityInfo` from `D:\ReactNative\RNApp\node_modules\react-native\Libraries\react-native\react-native-implementation.js`: Module `AccessibilityInfo` does not exist in the Haste module map

        产生原因:react-native 版本问题

        解决方案:将reactnative的版本降级,`npm unindtall -g react-native-cli、npm install -g react-native-cli@1.2.0、react-native init --version="0.55.4" 项目名称`

3.  error: bundling failed: Error: Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` from `/Users/zhangyunfei/Downloads/demo1/react-native/RNTester/js/RNTesterApp.android.js`: Module `@babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map(ps.这个问题困扰了我一天)

        产生原因:新react-native版本中模块缺失

        解决方案:直接安装这个模块 `npm i --save-Dev/-D @babel/runtime 或者 yarn add @babel/runtime --dev`

4.  Could not resolve all dependencies for configuration ':classpath'.
    Could not download gradle-core.jar (com.android.tools.build:gradle-core:1.3.1)
    Could not get resource 'https://jcenter.bintray.com/com/android/tools/build/gradle- core/1.3.1/gradle-core-1.3.1.jar'.
    Could not GET 'https://jcenter.bintray.com/com/android/tools/build/gradle-core/1 .3.1/gradle-core-1.3.1.jar'.
    peer not authenticated 

        产生原因:远端文件 下载不了

        解决方案:在`build.gradle`文件中jcenter() 替换成 jcenter { url "http://jcenter.bintray.com/"}

5.  React Native Could not expand ZIP错误信息

        产生原因:应该是编译后的android端的缓存比较多

        解决方法:
            cd android 
            gradlew clean

6.  Failed to find Build Tools revision 23.0.1

        产生原因:缺失对应版本 SDK工具

        解决方法:
            通过SDK message 或者是android studio工具安装相应的sdk工具

7.  * What went wrong: Execution failed for task ':app:installDebug'.

        产生原因:多半是android系统的版本和gradle中的配置不统一导致的;

        解决方法:
        1、先修改android 下wrapper的gradle-wrapper.properties配置文件,distributionUrl=https://services.gradle.org/distributions/gradle-3.3-all.zip
        app下面的build.gradle 文件:buildToolsVersion "25.0.0"
        android 工程下的build.gradle 文件: 
        dependencies { 
        classpath 'com.android.tools.build:gradle:2.3.0' 
        } 
        然后重新跑工程,运行 react-native run-android 就可以了
        2、在运行命令的时候加上当前的设备号


ReactNative API

组件写法

react中组件的定义主要分为三种方式(ES5写法react.createClass、ES6写法react.Component'推荐写法'、无状态函数形式)
写法区别详解

1、传统的ES5模式:

    var React = require('react');
    var ReactDOM = require('react-dom');

    var ES5component = React.createClass({
        getDefaultProp:function() {
           return { open: false }
        },

        getInitialState: function() {
          return { open: this.props.open };
        },

        handleClick: function(event) {
            this.setState({ open: !this.state.open });
        },

        //二级逻辑js书写
        render(){
            <!--return //组件内容-->
            <label className={className} onClick={this.handleClick.bind(this)}>
                <input type="checkbox" checked={open}/>
            </label>
        }
    })
    module.export ES5component


    ReactDOM.render(
      <ES5component />,
      document.getElementById('app')
    );

2、ES6推荐写法:

    import React from 'react'
    import { render } from 'react-dom'

    class SwitchButton extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          open: this.props.open
        }
        this.handleClick = this.handleClick.bind(this)
      }

      handleClick(event) {
        this.setState({ open: !this.state.open })
      }

      render() {
        let open = this.state.open,
          className = open ? 'switch-button open' : 'btn-switch'

        return (
          <label className={className} onClick={this.handleClick}>
            <input type="checkbox" checked={open}/>
          </label>
        )
      }
    }

    SwitchButton.defaultProps = {
      open: false
    }

    render(
      <SwitchButton />,
      document.getElementById('app')
    )

3、普通函数式(注意此时是没有全局的this的)

    const Fncomponent = (props) => (
      <li
        onClick={props.onClick}
        style={{textDecoration: props.complete ? "line-through" : "none"}}
      >
        {props.text}
      </li>
    )
    module.export Fncomponent

属性(props)和状态(state)

属性:基本上指定之后就不会发生变化;状态:是一个动态的属性值,一般多创建在constructor中

属性: ==只读性==

获取属性值:{this.props.propsName}

定义默认参数和类型:

    //Item是定义的组件名称

    Item.defaultProps = {
      item: 'Hello Props',
    };

    Item.propTypes = {
      item: PropTypes.string,
    };

状态:

state状态值一般保存数据状态,并且constructor是唯一能够初始化state的地方

定义状态:this.state = {}

==改变状态==:this.setState({},Fn) 注意这里是==有个可选的回调方法==

当我们调用this.setState方法时,React会更新组件的数据状态state,并且重新调用render方法,也就是会对组件进行重新渲染。

样式

对于复杂的样式我们使用StyleSheet.create({})将不同的样式进行对象式包裹;需要注意的是 驼峰命名法数组中后样式优先级更高

基础

  • css不存在缩略写法,并所有 - 蛇形写法变成驼峰写法
  • Image 组件的 css 图片会默认有2/3倍图片,引入图片只需引入正常图片即可,内部会处理

特殊

  • ==flex布局中的区别==:

    1、flexDirection默认是column而不是row,并且flex也仅仅只能指定一个数字值

  • 盒子阴影问题:

    1、仅仅支持ios
    2、基本样式为:

      shadowOffset:{ width:5, height:5 }, 
      shadowColor:'black', 
      shadowOpacity:0.8, 
      shadowRadius:2,
    

==生命周期==

image

react 的生命周期主要分为三种状态,11个生命周期函数;

1、初始化

getDefaultProps()   //设置默认的属性,同样可以用dufaultProps设置默认属性
getInitialState()   //定义state属性,使用ES6Class之后定义在constructor中
componentWillMount()    // **仅仅调用一次**
render()    //diff算法
componentDidMount() // 执行异步的操作 render之后会执行一次,可进行Api接口请求

2、更新

componentWillReceiveProps(nextProps)    //Props改变的时候执行
shouldComponentUpdate(nextProps, nextState)     //对性能进行优化,监听Props、State的状态值,未发生变化的时候可以避免diff算法对比,节省性能
componentWillUpdata(nextProps, nextState)   //更新,对state状态进行更新
render()
componentDidUpdate()    //更新完成了,此时可以对dom进行操作

3、销毁

componentWillUnmount()  //组件进行卸载时调用

Redux

个人认为:Redux主要就是对状态的集中管理工具,在一个地方进行查询、改变状态、传播

Redux-saga

redux整个过程是同步进行的,而saga只是redux解决 ==异步== 过程的一个中间件

在saga中不会通过UI去触发任务,而是通过dispatch 一个 action去通知UI

saga中包含三个部分:

    1、worker saga  //工作在这里执行并且获得返回结果

    2、watcher saga //今天action的变化去执行worker saga

    3、root saga    //立即启动sagas的唯一入口

组件

FlatList

组件是ScrollView的升级版本,并不会将所有的数据进行渲染,而是优先渲染屏幕中可见的元素;必备的两个属性data:列表数据源;renderItem:对data进行解析显示

...

打包apk(android版本)

实战基本教程如下/ 官方地址第三方教程

1、生成签名秘钥

`keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000`

如上命令在项目命令中执行,注意 my-release-key.keystore my-key-alias 分别是生成的签名秘钥文件的 ==文件名== 以及 ==别名==;

执行后,会让你输入如下一些信息
image

填入回车即在执行命令的目录生成 签名秘钥文件名 my-release-key.keystore

将生成的秘钥文件放入 android/app/ 目录下

==Bug== 可能会出现的问题

  1. keytool 命令如果环境变量没有需在JDK的bin目录中(C:\Program Files\Java\jdkx.x.x_x\bin)中执行

2、设置gradle变量

编辑~/.gradle/gradle.properties(全局配置,对所有项目有效)或是项目目录/android/gradle.properties(项目配置,只对所在项目有效)。如果没有gradle.properties文件你就自己创建一个,添加如下的代码(注意把其中的**替换为相应密码)

注: ~c/User/用户名的目录

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=****
MYAPP_RELEASE_KEY_PASSWORD=****

3、把签名配置加入到项目的 gradle 配置中( ==我没有设置这步....==)

编辑你项目目录下的android/app/build.gradle,添加如下的签名配置:

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

4、生成发行 APK 包

执行如下命令即可

$ cd android
$ ./gradlew assembleRelease

执行完会在 项目名\android\app\build\outputs\apk\ 中生成对应的apk文件

5、测试应用的发行版本(拓展)

在把发行版本提交到 Play Store 之前,你应该做一次最终测试。输入以下命令可以在设备上安装发行版本:

$ react-native run-android --variant=release

注:在 debug 和 release 版本间来回切换安装时可能会报错签名不匹配,此时需要先卸载前一个版本再尝试安装。

Bye-bye~

comments