React Native

安装

配置好 node 环境
npm install -g react-native-cli

运行项目

react-native init yourproject --version 0.44.3
- 注意: 当前的工作目录下要没有 yourproject 目录; 一定要加上 --version 0.44.3, 如果不加上去默认是生成最新版本的工程, 老的电脑可能因为报错而无法运行; 如果你使用的 zsh 安装的 node, 那么请在系统自带的 Terminal 中设置启动的 shell 为登录 shell, 因为 react-native 的一些操作需要打开 Terminal 执行 node相关命令, 主要就是执行 package.sh, 否则模拟器会出现 bundle 之类的错误; 也可以尝试一下 react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
cd yourproject
react-native run-ios

常用组件

获取屏幕像素

import { Dimensions } from 'react-native'
Dimensions.get('window') 获取对象, 有如下属性
- fontScale
- scale
- width
- height

View

属性
- flex: flex 与 flexWrap: 'wrap' 不要一起用
- transform
- background 系列
- opacity
- overflow: hidden or visible
- elevation: 类似 z-index
- style
  1. width
  2. height

Image

属性
- source: 图片路径
  1. uri: http://网络地址
  2. require('./本地地址')
- style
  1. resizeMode: cover(默认), contain, stretch
注意
- 一定要指定 width 和 height

TextInput

属性
- value: 默认文字, 但是回车键删除不掉
- keyboardType: enum('number-pad', '')
- multiline: true or false, 是否多行
- password: true or false
- placeholder: 占位置

Alert

使用
- Alert.alert('content')

Touchable 系列

TouchableOpacity
- 属性
  - activeOpacity
  - onPress
  - onPressIn
  - onPressOut
  - onLongPress

ScrollView

属性
- horizontal: true of false
- onScroll
- showHorizontalScrollIndicator
- showVerticalScrollIndicator
- pagingEnabled
- scrollEnabled
- scrollToTop
- onScrollEndDrag
- onScrollBeginDrag
- onMomentumEnd: 滚动结束的那一帧调用
方法
- scrollResponderScrollTo({x: offsetX, y: offsetY, animated: true or false})
注意
- ScrollView 需要给定高度才会有效, 但是一般也不给高度, 也不设置 flex 属性, 而是放内部的元素将 ScrollView 撑起来

ListView

套路代码


var dataSource = ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2});
this.state = {
    dataSource: dataSource.cloneWithRows(['row1', 'row2', 'row3'])
}

render() {
    return (
        <ListView dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
        />
        </ListView>
    );
}

上面的套路代码, 在 renderRow 中的回调函数太过简单, 一般回调是这样子的

renderRow = (rowData, sectionId, rowId, highlightRow) => {
  	// rowData 为数据
  	// sectionId 为页, 列斯通讯里的字母开头序列
  	// rowId 为 row 的 index, 是在 section 中的 index
  	// highlightRow 为高亮的 row
};

还可以为 ListView 定义 getSectionHeaderData, getRowData, renderRow, renderSectionHeader, 这些在实现的时候查看文档即可

RefreshControl

属性
- onRefresh
- refreshing: true of false, 通知是否需要刷新

Github tabbar

使用 react-native-tab-navigator, 支持跨平台

Navigator

查看文档
需要自定义 Header

Navigator 和 Tabbar

在 Native App 中, Tabbar 占据了整个屏幕, 其次它的每一个子页面存放的是 Navigator, Navigator 中再放我们的组件, 这与 H5+ 的 Vue 有一些不同