常用语法
变量定义
- 还是之前那份代码 完整App.js在最后，在updateNum中加入一段循环,注意各种分号和括号。
updateNum(newNum){
this.setState((state) => {
console.log('update has been exec');
var a =[];
for (let index = 0; index < 10; index++) {
a[index] = function(){
console.log(index);
} ;
}
a[6]();
return {
inputNum:newNum,
};});
}
- 在for循环中，如果使用let，调用a[6] (),打印的是结果是6，如果用var index，那么结果是10.
- let 相当于是个局部变量，var则有点全局的意思。
- const表示常量，声明后不能改变。
- 如果需要外部使用常量，使用export const
- 在ES6中，一方面规定，var、function命令声明的全局变量依旧是全局对象的属性；一方面规定，let、const、class命令声明的全局变量不属于全局对象的属性。。。
函数
var f = v=>v;
等同于：
var f = function(v){
return v;
};
如果函数不需要参数，也可以写成
var f = () => 5;
等同于
var f = function(){
return 5;
};
由于大括号可以表示代码块也可以表示对象，所以如果直接返回一个对象，需要再加上小括号
var getItem = id =>({id:id,name:'temp'});
等价于
var getItem = function(id){
return {id:id,name:'temp'};
};
- 函数体内的this对象就是定义时所在的对象，不是使用时所在的对象。
- 不能做构造函数，不能做arguments对象，不能用yield命令
- 在App.js中，把第一个onChangeText = {(newNum)=>this.updateNum(newNum)}换成onChangeText = {this.updateNum}，然后在render函数的return语句前加上
在render函数的return语句前加上
console.log('render exec');
console.log(this);
在updateNum中添加语句
updateNum(newNum){
console.log(' updateNum has been exec');
console.log(this);
this.setState((state) => {
return {
inputNum:newNum,
};});
}
- 运行时会首先打印出App，就是当前的this，输入文字是会调用updateNum方法，会出现红屏，打印出一个对象
App {props: Object, context: Object, refs: Object, updater: Object, state: Object, …}
_reactInternalFiber: FiberNode {tag: 2, key: null, type: , …}
_reactInternalInstance: Object {_processChildContext: }
context: Object {}
isMounted: undefined
props: Object {rootTag: 191}
refs: Object {}
replaceState: undefined
state: Object {inputNum: "", password: ""}
updater: Object {isMounted: , enqueueSetState: , enqueueReplaceState: , …}
__proto__: App {constructor: , updateNum: , updatePW: , …}
Object {style: 4, placeholder: "请输入手机号", onChangeText: , allowFontScaling: true}
index.bundle:60224
allowFontScaling:true
onChangeText:function updateNum(newNum) { … }
placeholder:"请输入手机号"
style:4
__proto__:Object {constructor: , __defineGetter__: , __defineSetter__: , …}
- 在ES6中，箭头函数中，this的指向是固定的，非箭头函数this的指向是会变化的。所以，可以参照updatePW的方式，在构造中使用bind(this)绑定this对象，保证this不变。（目前也就只能理解到这个程度了）
回调方法的四种写法
- onChangeText = {(newNum)=>this.updateNum(newNum)} 不需要绑定
- onChangeText = {this.updateNum} 需要bind绑定
- updateNum = (newNum) =>{...} 这样调用onChangeText = {this.updateNum} 不需要绑定
- onChangeText = {this.updateNum.bind(this)} 不需要在构造函数中绑定，但是每次render时都会执行一次bind。
属性
- 关于属性props，参见RN中文网的说明 属性
import React, { Component } from 'react';
import { Image } from 'react-native';
export default class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}
- <>尖括号表示一个控件，这里是Image，source和style都是Image的属性，并分别赋值。
状态State
- 参见状态
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
render() {
// 根据当前showText的值决定是否显示text内容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
export default class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
- 通常状态在构造函数中设定，表示会发生变化的数据。props通常一经指定（在生命周期内）就不再变化。上述例子中，文字内容是个属性，而显示或隐藏是状态。
样式
- 参见样式
- 在<Image source={pic} style={{width: 193, height: 110}} />中，是直接指定的宽高，但实际应用中，通常样式都比较多而且复杂，需要使用StyleSheet.create()
重新分析下之前的代码
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
//从react和ReactNative中导入组件
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
AppRegistry,
Dimensions,
PixelRatio,
TextInput
} from 'react-native';
// 定义常量
const {height,width} = Dimensions.get('window');
const pixelRatio = PixelRatio.get();
// 间距 局部变量
let widthOfMargin = Dimensions.get('window').width*0.05;
type Props = {};
// 可供外部使用的类
export default class App extends Component<Props> {
// 构造函数，定义状态
constructor(props){
super(props);
this.state = {
inputNum:'',
password:''
};
}
// 改变文字（内容）的方法
updateNum(newNum){
this.setState((state) => {
console.log('update has been exec');
return {
inputNum:newNum,
};});
}
updatePW(newPW){
this.setState(
() => {
return {password : newPW,};
}
);
}
// 渲染，返回一个组件
render() {
console.log('render exec');
return (
<View style = {styles.container}>
<TextInput style = {styles.textInputStyle}
placeholder = {'请输入手机号'}
onChangeText = {(newNum)=>this.updateNum(newNum)}
/>
<Text style = {styles.textStyle}>
输入的手机号：{this.state.inputNum}
</Text>
<TextInput style = {styles.textInputStyle}
placeholder = {'请输入密码'}
password = {true}
/>
<Text style = {styles.bigTextStyle}>
确定
</Text>
</View>
);
}
}
// 定格多个样式
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',// 内部的控件会居中
// alignItems: 'center',
backgroundColor: '#F5FCFF',
},
textInputStyle: {
fontSize: 20,
textAlign: 'center', // 文字会居中
backgroundColor: 'yellow',
margin: widthOfMargin,
},
textStyle: {
margin: widthOfMargin,
// textAlign: 'center',
color: '#333333',
marginBottom: 10,
fontSize:18,
},
bigTextStyle:{
margin:widthOfMargin,
backgroundColor:'green', // 背景颜色
textAlign:'center',
color:'red', // 文字颜色
fontSize:30 //文字尺寸
}
});
