React Native

React Native

安装

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

运行项目

1. 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
2. cd yourproject
3. react-native run-ios

常用组件

获取屏幕像素

1. import { Dimensions } from 'react-native'
2. 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 有一些不同