需求假設(shè)：封裝自定義組件鸠天，可進(jìn)行數(shù)字的自由增減,并在主頁(yè)面進(jìn)行求和聯(lián)動(dòng)
準(zhǔn)備知識(shí)：
1. extends Component?繼承組件類,?
2. constructor(props)?重寫父類方法，可在里面進(jìn)行變量定義
3. state與props：?用于存儲(chǔ)數(shù)據(jù)
4.?父子通信：?父?jìng)髯油ㄟ^props傳遞奶段，?子傳父通過回調(diào)父頁(yè)面方法實(shí)現(xiàn)
5.?render:?渲染頁(yè)面剥纷，類似于html，主要由react-native組件完成
6. StyleSheet.create?創(chuàng)建樣式定義
7. 總結(jié)：Vue父子組件通信筷畦，父?jìng)髯油ㄟ^props,?子傳父通過$emit原理應(yīng)該都差不多
8.?源代碼地址：?https://github.com/ysb002003/ReactNativeLearning
9.?實(shí)現(xiàn)效果
開始代碼：
1.目錄結(jié)構(gòu)：
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); //調(diào)用父類
? ? this.initValues = [1, 2, 3];
? ? const initSum = this.initValues.reduce((a, b) => a + b, 0);? //求和鳖宾，0為默認(rèn)值
? ? this.state = {
? ? ? totalNumber: initSum
? ? };
? ? this._updateNumber = this._updateNumber.bind(this); //在constructor中進(jìn)行函數(shù)綁定,否則報(bào)錯(cuò)
? };
? _updateNumber(newValue, oldValue) {? //子組件會(huì)調(diào)用該函數(shù)進(jìn)行數(shù)據(jù)通信
? ? 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) { //構(gòu)造函數(shù)
? ? ? ? super(props);
//使用state存儲(chǔ)父頁(yè)面?zhèn)鬟^來的參數(shù)，禁止直接修改主頁(yè)面?zhèn)鱽淼膒rops
this.state = {
? ? ? ? ? ? value: this.props.initValue || 1,??
? ? ? ? ? ? style: this.props.style,
? ? ? ? };
? ? }
? ? static defaultProps = {
? ? ? ? initValue: 1,
? ? ? ? onUpdateNumber: f => f? //?子調(diào)父的函數(shù)中介
? ? }
? ? _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); //調(diào)用父組件函數(shù)拇惋，進(jìn)行數(shù)據(jù)通信
? ? }
};
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
};
