【未学习】react native整理笔记-白红宇

【未学习】react native整理笔记

阅读量：6205 次

发布时间：2019-06-21

本文共 3932 字，大约阅读时间需要 13 分钟。

中文文档

一，环境搭建

安装react native命令行

npm install -g react-native-cli

初始化项目

react-native init luckygoods

cd luckygoods

初始化过程比较久，耐心等待...

1，IOS

安装Xcode，V7.0+

运行项目：npm run start

双击luckygoods/ios/luckygoods.xcodeproj，在xcode打开项目，command + R 运行虚拟机

当修改JS后，在虚拟器环境再次Command +R 即可刷新

2，Android

（1）安装Android Studio

安装完成后，进入SDK Manager，在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选如下选项：

Google APIs

Intel x86 Atom System Image、

Intel x86 Atom_64 System Image

Google APIs Intel x86 Atom_64 System Image

Android SDK Build-Tools 23.0.1

（2）ANDROID_HOME环境变量

确保ANDROID_HOME环境变量正确地指向了安装的Android SDK的路径。

编辑~/.bash_profile文件，添加：

export ANDROID_HOME=/Users/zhenn/android-sdks

立即生效：

source ~/.bash_profile

使用echo $ANDROID_HOME检查此变量是否已正确设置

（3）添加adb(android debugger bridge)命令

export PATH=/Users/zhenn/android-sdks/platform-tools:$PATH

查看$PATH

echo $PATH

显示如下信息：

/Users/zhenn/android-sdks/platform-tools:/opt/local/bin:/opt/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

（4）运行、调试

USB连接手机，对于手机两点要求：

务必开启USB调试

不要使用小米系列手机，未知原因导致无法正常安装

项目目录执行react-native run-android，正常情况下将安装测试应用到手机。打开应用，即可看到react-native编写的界面。

在更新js文件后，摇晃手机弹出menu，选择reload，应用视图即刷新。

另外，若选中远程调试选项，则可在chrome端调试js，具体请参考chrome调试部分。

二，Chrome调试

先安装chrome插件React Developer Tools

在项目目录启动react-native服务

$ cd ~/react-native-project

$ npm run start

在xcode中cmd + R构建项目并在虚拟机中启动，通过CMD + 1/2/3/4，可调节模拟器分辨率

chrome浏览器新建tab，打开地址：，将看到如下界面：

此时并没有进入调试状态，在js代码中增加debugger，浏览器并不会响应。

要进入调试，需要在模拟器中开启远程调试

默认快捷键 control + command + z，点击未弹出菜单，请检查与其他app的快捷键是否冲突

开启远程调试后，切换到chrome浏览器，调试状态就会更新如下

接下来就跟调试web项目一样，唯一区别是在浏览器不能呈现app视图。

三，基本知识

1，响应用户事件

可用事件列表

- onPress，按下屏幕并松开，相当于web中click

- onLongPress，按下不松开（长按）

- onPressIn，相当于touchstart

- onPressOut，相当于touchend

事件绑定必须写在TouchableHighlight、TouchableOpacity、TouchableWithoutFeedback组件中方可生效，比如：

</TouchableHighlight>

TouchableHighlight 制作按钮、链接，press时背景会改变

TouchableOpacity 用户press时降低透明度，而非改变背景

TouchableWithoutFeedback 没有任何视觉反馈

TouchableNativeFeedback

推荐使用第三种，其他点击效果均可通过第三种实现，利用onPressIn\onPressOut事件

2，样式

基本样式

width、height、marginLeft等

border等复合属性不能直接用，需要拆分borderWidth、borderColor

面向元素自身

alignSelf属性值

- flex-start 类似于float:left

- center

- flex-end 类似于float:right

面向子元素

justifyContent 设为center可垂直居中

alignItems: ‘center’ 会导致内部view不能自适应宽度，慎用

flex布局

不存在float属性，布局靠flex、alignSelf实现

position依然可用，设置为absolute时，务必设置zIndex大于1以上，否则会被普通组件遮挡

flexDirection 决定字元素排列方向，默认值为column(列)，可选值为row(行)

图片自适应

通过resizeMode来适配图片布局，包括contain, cover, stretch

默认不设置模式等于cover模式

contain模式自适应宽高，给出高度值即可

cover铺满容器，但是会做截取

stretch铺满容器，拉伸

文本必须放到Text组件内，且Text内的样式可被继承

TouchableHighlight 可点击区域组件

press的样式定义方式，增加属性 underlayColor="rgba(255,0,66,.5)"

borderRadius 只接受number，可设置四边圆角，不能单独单个角的弧度

borderTopLeftRadius 设置单个角弧度

3，网络请求

let url = '';

     fetch(url, { 
     
         method: 'GET',
         headers: {},
         // post方法可传body
         // body: JSON.stringify({ 
     
         //     firstParam: 'yourValue',
         //     secondParam: 'yourOtherValue',
         // })
     }).then((res) => { 
     
         return res.json();
     })
     .catch((error) => { 
     
         console.warn("fetch error:", error);
     })
     .then((res) => { 
     
         // 可操作json
         console.log(res);
     });