ReactNative学习笔记1.1
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
// 1.加载组件(面向组件开发) , React框架(这个框架用的是JSX语法)
/**
* React是默认组件不用添加{} , Component为非默认组件需要添加{}~
*/
import React, { Component } from 'react';
// 2.加载常用组件(样式表组件 , Text组件 , View组件 , 注册组件等)
/**
* 常用组件全部都为非默认组件都需要加在{}里面~
*/
import {
StyleSheet,
Text,
View,
AppRegistry,
} from 'react-native';
// 3.自定义程序入口组件:
export default class ReactDemo extends Component {
// 当一个组件要显示要初始化的时候会自动调用 , 这个方法不需要程序员主动调用!
render () {
// 当需要包装 HTML 组件标签的时候需要用 () 来包装
var str = 'Hello World !'
return (
//style = 这是一个表达式 , 表达式也需要加{}来包装~
{str}
)
}
}
// 4.创建一个样式表 ,用来描述这个组件的样子! 组件的外观 , 颜色等...
// create方法里面需要传递一个对象 , 在JS中对象都需要用 {} 来包装~
var styles = StyleSheet.create({
mainStyle: {
flex:1,
backgroundColor:'red',
},
TextStyle: {
marginTop:20,
}
})
// AppRegistry.registerComponent('ReactDemo', () => ReactDemo);
ReactNative学习笔记1.2
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
AppRegistry,
} from 'react-native';
/**
* 程序入口函数:
*
*/
export default class ReactDemo extends Component {
render () {
return (
)
}
}
/**
* 自定义组件:
*
*/
// 每个组件都有一个props属性 , 这算是一个属性的容器 , 所有的属性都放在这里面 , 可以通过this.props.XXX拿到自定义视图中的属性!
// 在JS中 , 属性不是一开始统一写好的 , 而是在使用的过程中动态的实现的!
// props在组件内部不能修改 , 只能放到组件的外部 , 也就是调用该组件的地方去修改!
class CustomerView extends Component {
render () {
return (
名称:{this.props.name }
年龄:{this.props.age}
)
}
}
/**
* 自定义组件:
*
*/
//显示我所有的工资:
class MoneyView extends Component {
// 更新金钱:
updateMoney() {
// 如果不进行bind绑定操作 , 在更新金钱的方法里拿不到this.state ,
// 断点会显示: undefined(未定义)!
// 所以:是这里出了问题!
var money = this.state.money;
money += 1000;
// 给状态机变量money重新赋值 , 这样会重新调用render方法渲染视图!
this.setState ({
money:money,
});
console.log(this.state.money);
}
// 组件构造初始化方法:
constructor (props) {
super (props);
// 定义状态机变量在 constructor 构造函数中写:
this.state = {
money:0,
age:1,
}
// 设置定时器(需要执行的操作(函数) , 间隔多少毫秒):
// setInterval(this.updateMoney.bind(this) , 1000);
// 这里的绑定 this 这个 this 指的就是MoneyView;
// 让MoneyView去执行 updateMoney 方法!
setInterval(this.updateMoney.bind(this) , 1000);
}
// 渲染:
render () {
return (
共有 + {this.state.money}元
我是:{this.props.name}
)
}
}
/**
* 样式表:
*
*/
var styles = StyleSheet.create({
mainStyle: {
flex:1,
backgroundColor:'red',
flexDirection:'row',
marginTop:20,
flexWrap:'wrap',
justifyContent:'center',
alignItems:'center',
},
customerViewStyle: {
height:100,
width:100,
backgroundColor:'yellow',
justifyContent:'center' ,
alignItems:'center',
},
moneyViewStyle: {
height:100,
width:100,
backgroundColor:'white',
},
})
// AppRegistry.registerComponent('ReactDemo', () => ReactDemo);
ReactNative学习笔记1.3
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
AppRegistry,
} from 'react-native';
/**
* 程序入口函数:
*
*/
export default class ReactDemo extends Component {
render () {
return (
)
}
}
/**
* 自定义组件:
*
*/
// 每个组件都有一个props属性 , 这算是一个属性的容器 , 所有的属性都放在这里面 , 可以通过this.props.XXX拿到自定义视图中的属性!
// 在JS中 , 属性不是一开始统一写好的 , 而是在使用的过程中动态的实现的!
// props在组件内部不能修改 , 只能放到组件的外部 , 也就是调用该组件的地方去修改!
class CustomerView extends Component {
render () {
return (
名称:{this.props.name }
年龄:{this.props.age}
)
}
}
/**
* 自定义组件:
*
*/
//显示我所有的工资:
class MoneyView extends Component {
// 更新金钱:
updateMoney() {
// 如果不进行bind绑定操作 , 在更新金钱的方法里拿不到this.state ,
// 断点会显示: undefined(未定义)!
// 所以:是这里出了问题!
var money = this.state.money;
money += 1000;
// 给状态机变量money重新赋值 , 这样会重新调用render方法渲染视图!
this.setState ({
money:money,
});
console.log(this.state.money);
}
// 组件构造初始化方法:
constructor (props) {
super (props);
// 定义状态机变量在 constructor 构造函数中写:
this.state = {
money:0,
age:1,
}
// 设置定时器(需要执行的操作(函数) , 间隔多少毫秒):
// setInterval(this.updateMoney.bind(this) , 1000);
// 这里的绑定 this 这个 this 指的就是MoneyView;
// 让MoneyView去执行 updateMoney 方法!
setInterval(this.updateMoney.bind(this) , 1000);
}
// 渲染:
render () {
return (
共有 + {this.state.money}元
我是:{this.props.name}
)
}
}
/**
* 样式表:
*
*/
var styles = StyleSheet.create({
mainStyle: {
flex:1,
backgroundColor:'red',
flexDirection:'row',
marginTop:20,
flexWrap:'wrap',
justifyContent:'center',
alignItems:'center',
},
customerViewStyle: {
height:100,
width:100,
backgroundColor:'yellow',
justifyContent:'center' ,
alignItems:'center',
},
moneyViewStyle: {
height:100,
width:100,
backgroundColor:'white',
},
})
// AppRegistry.registerComponent('ReactDemo', () => ReactDemo);
ReactNative学习笔记1.4 - 正向传值
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
AppRegistry,
} from 'react-native';
/**
* 程序入口函数:
*
*/
export default class ReactDemo extends Component {
render () {
return (
)
}
}
// 父控件:
class Father extends Component {
sendMoney () {
// 3.拿到子控件:
var son = this.refs.reference;
// 4.拿到状态机变量:money:
var moneyState = son.state.moneyState;
// 5.做一些变化:
moneyState += 100;
// 6.重新给状态机变量赋值:
son.setState ({
moneyState:moneyState,
});
console.log(moneyState);
}
// 1.这里先定义一个props.money = 100 的初始值:
render () {
return (
给零花钱
)
}
}
// 子控件:
class Son extends Component {
// 2.子控件中拿到自己子控件定义的属性:props.money
// 并且把属性作为给子控件的状态机变量moneyState的初值:
constructor (props) {
super(props);
this.state = {
moneyState: this.props.money,
};
}
// 这样 就能通过 this.state.moneyState 拿到每次点击后的金钱.
// 状态机变量一变化天然就会调用render方法 , 也就会立即刷新UI了!
render () {
return (
{this.props.sonName}
收到 - {this.state.moneyState} - 元零花钱
)
}
}
/**
* 样式表:
*
*/
var styles = StyleSheet.create({
mainStyle: {
flex:1,
backgroundColor:'white',
flexDirection:'row',
marginTop:20,
flexWrap:'wrap',
justifyContent:'center',
alignItems:'center',
},
fatherStyle: {
width:200,
height:400,
backgroundColor:'orange',
justifyContent:'center' ,
alignItems:'center',
},
sonStyle: {
width:200,
height:200,
backgroundColor:'green',
justifyContent:'center' ,
alignItems:'center',
},
textStyle: {
justifyContent:'center' ,
alignItems:'flex-start',
},
})
AppRegistry.registerComponent('ReactDemo', () => ReactDemo);
ReactNative学习笔记1.5 - 反向传值
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
/**
* 反向传值:子控件传值给父控件:
*
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
AppRegistry,
} from 'react-native';
export default class ReactDemo extends Component {
render () {
return (
)
}
}
// 父控件:
class Father extends Component {
// 构造方法:
constructor (props) {
super(props);
this.state = {
money:0,
age:27,
};
}
// 爸爸定义一个收到钱的方法:
// 别人给我传递了一个money变量 ,
// 我接收 , 并且把这个接收到的money变量赋值给我的状态机变量
// 用this.setState方法(设置状态)
receiveMoney (money , age) {
var m = this.state.money;
// 每一次增加一个money:
m += money;
this.setState ({
money:m,
age:age,
})
}
render () {
return (
// 把父亲获取到钱的方法通过属性来传递给儿子:
收到儿子{this.state.money}元钱
年龄{this.state.age}岁
)
}
}
// 子控件:
class Son extends Component {
// 点击时调用传递金钱的方法:
sendMoney() {
// 在点击的方法里面调用这个方法给属性赋值一个100:
// 子控件这个属性里面存储的是一个方法 , 传递的参数也是根据这个方法来匹配的!
this.props.getMoney(100 , 28);
}
render () {
return (
{this.props.sonName}
点击按钮给爸爸钱
)
}
}
// 样式表:
var styles = StyleSheet.create({
mainStyle: {
flex:1,
backgroundColor:'white',
flexDirection:'row',
marginTop:20,
flexWrap:'wrap',
justifyContent:'center',
alignItems:'center',
},
fatherStyle: {
width:200,
height:400,
backgroundColor:'orange',
justifyContent:'center' ,
alignItems:'center',
},
sonStyle: {
width:200,
height:200,
backgroundColor:'green',
justifyContent:'center' ,
alignItems:'center',
},
textStyle: {
justifyContent:'center' ,
alignItems:'flex-start',
},
})
AppRegistry.registerComponent('ReactDemo', () => ReactDemo);
ReactNative学习笔记1.6 - 无关联的两个控件之间传值
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
/**
* 反向传值:子控件传值给父控件:
*
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
AppRegistry,
DeviceEventEmitter, //通知
} from 'react-native';
export default class ReactDemo extends Component {
render () {
return (
)
}
}
// 哥哥控件:
class BrotherGe extends Component {
// 给弟弟钱:
sendMoneyMethod () {
//传值:
DeviceEventEmitter.emit('sendMoney' , 100 , 20);
}
render () {
return (
// 把父亲获取到钱的方法通过属性来传递给儿子:
{this.props.brotherGeName}
点击按钮给弟弟钱
)
}
}
// 弟弟控件:
class BrotherDi extends Component {
// 获得金钱:
getMoneyMethod(money , age) {
var m = this.state.money;
m += money;
this.setState({
money:m,
age:age,
})
}
constructor (props) {
super(props);
this.state = {
money: 0,
age:19,
}
//添加监听者:
DeviceEventEmitter.addListener('sendMoney' , this.getMoneyMethod.bind(this));
}
render () {
return (
{this.props.brotherDiName}
收到哥哥 {this.state.money} 元钱
弟弟 {this.state.age} 岁
)
}
}
// 样式表:
var styles = StyleSheet.create({
mainStyle: {
flex:1,
backgroundColor:'white',
flexDirection:'row',
marginTop:20,
flexWrap:'wrap',
justifyContent:'center',
alignItems:'center',
},
brotherGeStyle: {
width:200,
height:200,
backgroundColor:'orange',
justifyContent:'center' ,
alignItems:'center',
},
brotherDiStyle: {
width:200,
height:200,
backgroundColor:'green',
justifyContent:'center' ,
alignItems:'center',
},
textStyle: {
justifyContent:'center' ,
alignItems:'flex-start',
},
})
AppRegistry.registerComponent('ReactDemo', () => ReactDemo);