需求假设：封装自定义组件，可进行数字的自由增减,并在主页面进行求和联动
准备知识：
1. extends Component 继承组件类,
2. constructor(props) 重写父类方法，可在里面进行变量定义
3. state与props： 用于存储数据
4. 父子通信： 父传子通过props传递， 子传父通过回调父页面方法实现
5. render: 渲染页面，类似于html，主要由react-native组件完成
6. StyleSheet.create 创建样式定义
7. 总结：Vue父子组件通信，父传子通过props, 子传父通过$emit原理应该都差不多
8. 源代码地址： https://github.com/ysb002003/ReactNativeLearning
9. 实现效果
开始代码：
1.目录结构：
2. 主界面代码 App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import Counter from './src/component/Counter';
type Props = {};
export default class App extends Component {
constructor(props) {
super(props); //调用父类
this.initValues = [1, 2, 3];
const initSum = this.initValues.reduce((a, b) => a + b, 0); //求和，0为默认值
this.state = {
totalNumber: initSum
};
this._updateNumber = this._updateNumber.bind(this); //在constructor中进行函数绑定,否则报错
};
_updateNumber(newValue, oldValue) { //子组件会调用该函数进行数据通信
const value = newValue - oldValue;
this.setState({ totalNumber: this.state.totalNumber + value });
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
borderWidth: 10
},
welcome: {
fontSize: 30,
fontWeight: 'bold',
textAlign: 'center',
margin: 10,
color: 'red'
},
});
3. 子组件代码 Counter.js
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
TouchableOpacity,
TextInput
} from 'react-native';
import PropTypes from 'prop-types';
export default class Counter extends Component {
constructor(props) { //构造函数
super(props);
//使用state存储父页面传过来的参数，禁止直接修改主页面传来的props
this.state = {
value: this.props.initValue || 1,
style: this.props.style,
};
}
static defaultProps = {
initValue: 1,
onUpdateNumber: f => f // 子调父的函数中介
}
_checkNumber() {
let number = this.state.value;
if (number == '' || number < 1) {
number = 1;
} else {
number = Math.floor(number); //取最接近的int，固定写法
}
this.setState({ value: number });
}
_reduce() {
this._changeText(this.state.value - 1);
}
_plus() {
this._changeText(this.state.value + 1);
}
_changeText(txt) {
this.setState({ value: Number(txt) });
this.props.onUpdateNumber(txt, this.state.value); //调用父组件函数，进行数据通信
}
};
const styles = StyleSheet.create({
operatingBox: {
width: 120,
height: 35,
borderColor: '#ddd',
borderWidth: 1,
flexDirection: 'row',
alignItems: 'center',
borderRadius: 5,
overflow: 'hidden'
},
reduceBox: {
width: 34,
height: 34,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderRightColor: '#ddd'
},
btnReduce: {
fontSize: 18,
textAlign: 'center',
backgroundColor: 'transparent'
},
inputBox: {
flex: 1,
borderRightWidth: 1,
borderRightColor: '#ddd'
},
input: {
flex: 1,
padding: 0,
textAlign: 'center',
backgroundColor: 'transparent',
fontSize: 14
},
plusBox: {
width: 34,
height: 34,
alignItems: 'center',
justifyContent: 'center'
},
btnPlus: {
fontSize: 18,
textAlign: 'center',
backgroundColor: 'transparent'
},
});
Counter.propTypes = {
initValue: PropTypes.number,
style: PropTypes.object
};
网友评论