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的源地址

运行

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

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 (
      <div></div>
    )
  }
}

react生命周期

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

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

props

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

1. 父组件向子组件传递数据
2. 父组件向子组件传递调用函数，用来通知父组件消息。
3. 用来作为子组件逻辑判断的标示，渲染的样式等
4. 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 (
      <div>
        <div>{this.state.count}</div>
        <Button onClick={() => this.add()}>Add</Button>
        <Button onClick={() => this.sub()}>Sub</Button>
      </div>
    )
  }
}

渲染

• 数据展示
  用{}包裹数据

• 循环

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

• 条件判断

  { flag && <div>测试</div>}
  { flag ? <div>测试</div> : <div>测试2</div>}
  

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布局一般都是对内容组件进行操作。

样式编写

<View style={styles.container}></View>
const styles = StyleSheet.create({
  container: {
    height: 100
  }
})

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

数据请求介绍

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

路由编写

在app.js中定义路由<NavScene key="SpectrumSearch" component={GenealogySearch} renderRightButton = { props => <GenealogySearchBox preKey={props.preKey}/> }/>

• 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

调试

1. 通过console.log输出打印，在XCode/android studio控制台查看对应的输出。
2. 通过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作为文件夹内所有文件的导出