为什么我会收到“不变违规行为”#39;使用KeyboardAvoidView时出错?

时间:2018-05-01 15:06:16

标签: reactjs react-native

当我的反应原生应用程序中存在键盘时,我的内容被推高并被粉碎在一起。我试图使用KeyboardAvoidView来解决这个问题,但我一直收到一个不变的违规错误。只有在我使用KeyboardAvoidView时才会出现此错误。当我切换回使用View时它会消失。有谁知道如何让KeyboardAvoidView正常工作?

        import React, {Component} from 'react';
        import PropTypes from 'prop-types';
        import {View, StyleSheet, Text, ImageBackground, TouchableOpacity, Image, ActivityIndicator, KeyboardAvoidView} from 'react-native';
        import {connect} from "react-redux";            
        import Header from '../../components/Header/Header';
        import Loader from "../../components/Login/Loader";
        import {loadCustomerOrderDetails} from '../../actions/AppActions'
        import {Actions} from 'react-native-router-flux';
        import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
        import selection from '../../selection';

        class Home extends Component {
            constructor(props) {
                super(props);
                this.props.dispatch(loadCustomerOrderDetails(this.props.customerId));
            }

            render() {
                const {isLoading, details} = this.props.customerData;
                const {invoices, unsubmittedOrders, itemIssues, deliveryStats} = details;

                return (
                    <KeyboardAvoidView style={styles.wrapper} behavior="padding" enabled>

                        <ImageBackground source={require('../../assets/loginBG.jpg')} style={styles.backgroundImage}>

                            <View>
                                <Image style={styles.mblogo} source={require('../../assets/mb_logo.png')} />
                            </View>

                            {isLoading &&
                                <ActivityIndicator
                                    style={{alignSelf: 'center'}}
                                    animating={true}
                                    size='large'
                                />
                            }

                        </ImageBackground>
                        <Header style={styles.header}/>
                    </KeyboardAvoidView>
                );
            }
        }

        Home.propTypes = {
            customerData: PropTypes.object,
            customerId: PropTypes.string,
        }

        function mapStateToProps(state) {
            const {customerData, app} =  state;
            return {
                customerData: customerData,
                customerId: app.customerId
            };
        }

        export default connect(mapStateToProps)(Home);

enter image description here

1 个答案:

答案 0 :(得分:1)

它的KeyboardAvoidingView不是KeyboardAvoidView。