环境安装
- 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 (
<div></div>
)
}
}
react生命周期
参考资料
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 (
<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
调试
- 通过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三项。
项目结构
一般我们用index.js作为文件夹内所有文件的导出
