当我的反应原生应用程序中存在键盘时,我的内容被推高并被粉碎在一起。我试图使用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);