React Native入门教程

环境安装

nvm
管理node版本的shell工具，用来便捷安装和管理npm，node版本。安装地址
node 8.1.3
nvm install 8.1.3
nrm（npm源地址管理，方便切换源）
npm install -g nrm
gulp
npm install -g gulp
react-native-cli (gulp，react-native打包需要)
nrm use taobao
npm install -g react-native-cli

运行nrm add XXX XXX添加cnpm的源地址

运行

命令行进入项目主文件夹
nrm use jinhui切换金汇源, npm install 安装依赖
npm start运行项目
打开模拟器/真机连接服务

ES6基础

module的语法

export
export function test(){}
export const name = "haha"
export class XXX {}
export default XXX （defalut导出）
import
import {a, b} from XXX
import XXX from XXX （获取某文件的default导出）
export {a, b} from XXX
导出某变量从XXX文件中，类似于写了一个index文件作专门的导出

解构赋值

数组
let [a, b, c] = list;
对象
let {a = 1, b = 2} = obj;

函数

function test(a = 1, b = {}) {

}

function test2({a, b, c}) {

}

扩展运算符

let obj = {...obj2}
let list = [...list1]

箭头函数

这里需要注意的是箭头函数的绑定this

常量定义

const TEST = '1'

参考资料
es6 扩展运算符三个点
ECMAScript 6 入门

react基础

基本组件

import React from 'react';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
  }

  componentDidMount() {
    // 数据请求
  }

  componentWillReceiveProps() {
    // 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用
  }

  componentWillUnmount() {
    // 销毁长链接等本组件占用资源的操作
  }

  render() {
    // 注意render一个组件
    return (
      
    )
  }
}

react生命周期

D4F18260-9BFE-4C82-895A-8B8E326B26FD

参考资料
React Native 中组件的生命周期
一张图学习 ES6 中的 React 生命周期与流程

props

组件的属性，可以为任意类型。主要的用途：

父组件向子组件传递数据
父组件向子组件传递调用函数，用来通知父组件消息。
用来作为子组件逻辑判断的标示，渲染的样式等
children用来作为子组件的部分视图。

参考资料
Props（属性）

state

在constructor中初始化该组件的state，之后通过this.setState({})修改state。setState所做的修改是合并修改，意思是setState中的对象会和之前的state做合并。
每次修改完状态后，稍后会执行render重新渲染。

import React from 'react';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1
    }
  }

  add() {
    let { count } = this.state;
    count++;
    this.setState({
      count: count
    });
  }

  sub() {
    let { count } = this.state;
    count--;
    this.setState({
      count: count
    });
  }

  render() {
    return (
      
        {this.state.count}
        
        
      
    )
  }
}

渲染

数据展示
用{}包裹数据

循环

{
  [1,2,3,4].map(item => {
    return {item}
  })
}

条件判断

{ flag && 测试}
{ flag ? 测试
 : 测试2}

react native

基本组件介绍

View

相当于html的div，块容器

Image

图片展示组件，常用属性如下：

source
source={{uri: "XXX"}} 加载网络图片, 必须设置宽和高才能展示。在展示图片前，最好判断XXX是否存在
source={require("XXX")} 加载本地图片，XXX为本地图片相对地址

应该封装一个Image组件，用来处理onError的错误和网络图片缓存

TouchableOpacity

用于写按钮的组件。常用属性如下：（此组件与TouchableHighlight的区别在于并没有额外的颜色变化，更适于一般场景）

activeOpacity
指定封装的视图在被触摸操作激活时以多少不透明度显示（通常在0到1之间）
onPress

TouchableHighlight

用于写按钮的组件，常用属性如下：

activeOpacity
指定封装的视图在被触摸操作激活时以多少不透明度显示（通常在0到1之间）
underlayColor
有触摸操作时显示出来的底层的颜色
onPress

Text

显示文字的组件

ellipsizeMode
取值(‘head’, ‘middle’, ‘tail’, ‘clip’)
- head：从文本的开头进行截断，并在文本的开头添加省略号，例如：…xyz。
- middle ：从文本的中间进行截断，并在文本的中间添加省略号，例如：ab…yz。
- tail：从文本的末尾进行截断，并在文本的末尾添加省略号，例如：abcd…。
- clip ：文本的末尾显示不下的内容会被截断，并且不添加省略号，clip只适用于iOS平台。
numberOfLines
限制最多显示的行数
onPress

TextInput

输入框组件

value
onChangeText
underlineColorAndroid="transparent"
TextInput在安卓上默认有一个底边框，同时会有一些padding。如果要想使其看起来和iOS上尽量一致，则需要设置padding: 0，同时设置underlineColorAndroid="transparent"来去掉底边框
placeholder
placeholderTextColor
onBlur
当文本框失去焦点的时候调用此回调函数。
onFocus
当文本框获得焦点的时候调用此回调函数。

Modal

ScrollView

horizontal
当此属性为true的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。
showsHorizontalScrollIndicator
当此属性为true的时候，显示一个水平方向的滚动条。

FlatList

data
数据
renderItem
每一项的渲染组件
onEndReached
当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用
onEndReachedThreshold
决定当距离内容最底部还有多远时触发onEndReached回调
keyExtractor
item的key
ref
this._list.scrollToOffset({x: 0, y: 0})

Alert

StyleSheet

样式定义StyleSheet.create

Dimensions

获取屏幕尺寸
Dimensions.get('window').height
Dimensions.get('window').width

布局

flex布局
Flex 布局教程：语法篇
绝对定位

flex布局一般都是对内容组件进行操作。

样式编写


const styles = StyleSheet.create({
  container: {
    height: 100
  }
})

宽/高无单位，这里的1代表的是逻辑像素点

数据请求介绍

在services文件夹中进行定义，在其他页面引用调用。参照SpectrumService的编写。

路由编写

在app.js中定义路由 }/>

key为该路由标识
component 为该路由展示的组件
title为导航栏标题
renderRightButton可重写右侧按钮

导航栏在路由组件中定义

路由跳转

router文件定义了三个跳转方法，jump, jumpRNApp, jumpApp
jump代表正常的RN页面之间跳转
jumpRNApp代表RN页面之间需要跨路由，并且重新启动一个RN实例，一般用于首页跳转到其他RN页面
jumpApp代表跳转到原生App的页面

与App的交互

startActivity
跳转到APP某个路由
finishActivity
结束当前RN页面
getUserInfo
获取用户信息
AppEventListener
监听App的调用，包括路由跳转和重新加载

日志记录

通过引入services中的logger，调用其方法进行日志输出。方法有info, debug, warn, error四种，通过logger.error(tag, {})调用，tag为字符串。

详见logger

调试

通过console.log输出打印，在XCode/android studio控制台查看对应的输出。
通过Alert.alert弹框，进行调试。

rn基本命令介绍

npm start 启动服务
npm run startWithNoCache清空缓存启动服务
npm run build 打包
npm install 依赖安装
npm run reinstall 重新安装依赖

切记不要修改将npm5安装依赖后的package.json文件提交。package.json的依赖记录中不应包含react-native,rn-nodeify,util三项。

项目结构

image.png

一般我们用index.js作为文件夹内所有文件的导出