React Native之如何优化组件来达到减少代码冗余

对于一个对代码整洁规范的一枚程序媛，是万万不能允许冗余代码的存在，即便是组件，我们总是在寻求更好的方法来让组件开发的更完美，且复用度更高。

如下，是我最近开发的两个功能，功能相似，由于开发时间紧张，一开始分为两个组件开发，功能测试完成后开始考虑其优化，并且已经成功优化成一个组件。解决办法简单来说就是：利用传参为函数的方式，进行回调函数的调用；组件内的内容改变，通过一个组件内的全局变量，父组件在传递参数至子组件时，开始赋值这个全局变量。

情况描述：

图A：

图B：

图C：

逻辑：

1.点击“本人身份证正面扫描”，调取摄像头权限开始扫描，若扫描失败，出现图B(五张身份证图片), 若扫描成功，调取接口识别图像至文字；点击“我知道了”，弹层消失。
2.点击“人脸识别”，调取实名接口判断实名是否成功，若成功出现图C(7张头像图片)，紧接着点击“我知道了”，弹层消失且调取人脸识别流程接口；若调取实名接口判断实名不成功，弹出错误消息提示。

解决办法：

父组件中：

给弹出层方法中通过传参的方式，this.showBtnRealSimpleModal(type,callback);
type为0是实名，type为1是活体.

render层：

<CMBtnRealModal ref="btnRealModal" checkFaceRecognition={this.checkFaceRecognition.bind(this)}></CMBtnRealModal>
方法层：
showBtnRealSimpleModal(type,callback) {    this.refs["btnRealModal"].showBtnRealModalOrNo(type,callback);       }
方法调用：

this.showBtnRealSimpleModal('1','');
this.showBtnRealSimpleModal('0','');


子组件中：

初始化：（初始化变量faceOrReal）

constructor(props) {        super(props);        this.props = props;        this.state = {            modalVisible: false,            modalAnimatedHeight: new Animated.Value(-400),            chaAnim: new Animated.Value(0),            loanState: props.loanState ? props.loanState : 0,            title: this.props.title,            content: this.props.content,            faceOrReal:'',  //判断是实名还是活体，实名为0，活体为1（notice变量也是如此）        }}
显示弹层的方法：（当从父组件传递过来的参数type是0，就直接faceOrReal赋值为0，表示是实名；反之是活体）
showBtnRealModalOrNo(type,callback) {        var _this = this;        _this.setState({            faceOrReal:type        });        var isShow = this.state.modalVisible;        if (isShow) {            Animated.timing(          // Uses easing functions                _this.state.chaAnim,    // The value to drive                {toValue: 0, duration: 150}            // Configuration            ).start(() => {                Animated.timing(          // Uses easing functions                    _this.state.modalAnimatedHeight,    // The value to drive                    {toValue: -400, duration: 300}            // Configuration                ).start(() => {                    _this.CMModal.hideModal();                    _this.setState({                        modalVisible: false,                    });                    if(type == '1' && callback && typeof callback == 'function'){                        callback.call();                    }                });            })        } else {            _this.setState({                modalVisible: true,            })            _this.CMModal.showModal(function () {                Animated.timing(// Uses easing functions                    _this.state.modalAnimatedHeight,    // The value to drive                    {toValue: 0, duration: 300}            // Configuration                ).start(() => {                    Animated.timing(// Uses easing functions                        _this.state.chaAnim,    // The value to drive                        {toValue: 1, duration: 150}            // Configuration                    ).start();                });            });        }}

render层：

render() {        let _this = this;        return (            <CMModal                ref={(refs) => {                    this.CMModal = refs;                }}            >                <TouchableOpacity style={styles.modalSpace} onPress={() => this.showBtnRealModalOrNo()} activeOpacity={1}/>                <Animated.View style={[styles.modalAnimate, {marginBottom: this.state.modalAnimatedHeight}]}>                    <View style={styles.modalContainer}>                        <CMfaceNotice notice={ this.state.faceOrReal == 1 ? 1 : 0 } />                        <TouchableOpacity onPress={ () => this.state.faceOrReal ==1 ? this.showBtnRealModalOrNo('1',_this.props.checkFaceRecognition): this.showBtnRealModalOrNo()} activeOpacity={1}                                          style={[styles.modalChaView]}>                            <Text style={styles.modalChaText}>我知道了</Text>                        </TouchableOpacity>                    </View>                </Animated.View>            </CMModal>        )}


<CMfaceNotice notice={ this.state.faceOrReal == 1 ? 1 : 0 } />
这个CMfaceNotice就是显示九宫格（notice变量为0是实名，为1是活体），这里的faceOrReal就起到作用了。

<TouchableOpacity onPress={ () => this.state.faceOrReal ==1 ? this.showBtnRealModalOrNo('1',_this.props.checkFaceRecognition): this.showBtnRealModalOrNo()} activeOpacity={1}                                          style={[styles.modalChaView]}>                            <Text style={styles.modalChaText}>我知道了</Text>                        </TouchableOpacity>
在点击“我知道了”这个按钮，实名不触发事件而活体触发事件，也用到了这个faceOrReal来做判断：

用箭头函数如何利用三目运算区分不同的函数调用：

onPress={ () => this.state.faceOrReal ==1 ? this.showBtnRealModalOrNo('1',_this.props.checkFaceRecognition): this.showBtnRealModalOrNo()}