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()}