我有带有TextInput组件的React Native应用程序。目前我正在尝试实现当用户输入TextInput时出现的KeyboardAvoidingView，但没有发生任何事情。KeyboardAvoidingView没有出现。我更改了行为属性，将绝对位置放置到容器中，但KeyboardAvoidingView仍然无法正常工作。有人可以解释一下为什么吗？
const styles = StyleSheet.create({
addTag: {
alignItems: 'center',
borderColor: '#DDDDDD',
borderWidth: WP('0.3%'),
borderRadius: HP('6.8%'),
flexDirection: 'row',
//left: WP('4%'),
margin: WP('3.5%'),
minWidth: WP('19%')
},
arrowImage: {
height: HP('1.62%'),
top: HP('0.55%'),
width: WP('2.7%')
},
backdropContainer: {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
flex: 1
},
callDurationContainer: {
alignItems: 'center',
backgroundColor: '#FAFAFA',
flexDirection: 'row',
justifyContent: 'space-between',
height: HP('8%'),
width: '100%'
},
commentContainer: {
backgroundColor: 'grey',
height: HP('15%'),
width: '100%'
},
container: {
flex: 1
},
contactContainer: {
alignItems: 'center',
flexDirection: 'row',
height: HP('11%'),
justifyContent: 'space-between',
top: HP('0.4%'),
width: '100%'
},
contactSubContainer: {
alignItems: 'center',
flexDirection: 'row',
width: WP('60%')
},
defaultTag: {
alignItems: 'center',
borderColor: '#FEDA5A',
borderWidth: WP('0.3%'),
backgroundColor: 'rgba(254, 218, 90, 0.6)',
borderRadius: HP('6.8%'),
justifyContent: 'center',
margin: WP('1.2%')
},
defaultTagText: {
fontFamily: 'Roboto-Medium',
fontSize: HP('2.3%'),
paddingBottom: HP('0.92%'),
paddingLeft: WP('4%'),
paddingRight: WP('4%'),
paddingTop: HP('0.92%')
},
defaultTagsContainer: {
flexDirection: 'row',
//flexWrap: 'wrap',
left: WP('3%'),
marginRight: WP('3%'),
top: HP('5%')
},
durationSubContainer: {
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
width: WP('75%')
},
modalContainer: {
alignSelf: 'center',
backgroundColor: '#ffffff',
flexDirection: 'column',
height: HP('95%'),
top: HP('28%'),
width: WP('100%')
},
phoneContainer: {
bottom: HP('0.3%'),
justifyContent: 'space-between',
height: HP('6.1%'),
left: WP('4%')
},
phoneStyle: {
color: '#4F4F4F',
fontFamily: 'Roboto',
fontSize: HP('2.2%'),
left: WP('1%')
},
phoneSubContainer: {
flexDirection: 'row'
},
slider: {
height: HP('4%'),
//top: HP('9.9%'),
width: WP('50%')
},
shadowStyle: {
elevation: 24,
shadowColor: 'rgba(0, 0, 0, 0.7)',
shadowOffset: {
width: 0,
height: 24
},
shadowOpacity: 0.58,
shadowRadius: 16
},
tagsContainer: {
minHeight: HP('24%'),
width: '100%'
},
tagsCounter: {
width: '100%'
},
tagsText: {
color: '#4F4F4F',
fontFamily: 'Roboto-Medium',
fontSize: HP('2.2%'),
left: WP('4.5%'),
top: HP('2.5%')
},
textDurationStyle: {
color: '#585858',
fontFamily: 'Roboto-Medium',
fontSize: HP('2.2%'),
right: WP('1%'),
width: WP('24%')
},
thumb: {
borderRadius: HP('1.01%'),
height: HP('2.03%'),
width: WP('3.5%')
},
timeStyle: {
color: 'rgba(79, 79, 79, 0.8)',
fontFamily: 'Roboto',
fontSize: HP('2.1%')
},
track: {
height: HP('0.3%')
},
userTagsContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
top: HP('4%')
},
userTagInput: {
fontFamily: 'Roboto',
fontSize: HP('2%'),
paddingLeft: WP('5%'),
paddingRight: WP('4%')
//position: 'relative'
},
wrapContainer: {
backgroundColor: 'rgba(254, 218, 90, 0.6)',
borderRadius: 50
}
})
const ModalContactCard = props => {
const {
addTag,
arrowImage,
backdropContainer,
buttonContainer,
callDurationContainer,
commentContainer,
container,
contactContainer,
contactSubContainer,
defaultTag,
defaultTagsContainer,
defaultTagText,
durationSubContainer,
modalContainer,
phoneContainer,
phoneStyle,
phoneSubContainer,
slider,
shadowStyle,
tagsContainer,
tagsCounter,
tagsText,
textDurationStyle,
timeStyle,
thumb,
track,
userTagInput,
userTagsContainer
} = styles
const { callDuration, changeCallDuration, onModalPress, onSubmitEditing, modalVisible, userTag, userTags } = props
const keyboardAvoidingViewBehaviour = Platform.OS === 'ios' ? 'padding' : null
return (
<KeyboardAvoidingView behavior={keyboardAvoidingViewBehaviour} style={container}>
<Modal
animationInTiming={600}
animationOutTiming={600}
backdropTransitionOutTiming={1000}
isVisible={modalVisible}
customBackdrop={<View style={backdropContainer} />}
>
<View style={[modalContainer, shadowStyle]}>
<View style={contactContainer}>
<TouchableOpacity onPress={console.log('Left icon pressed')}>
<Ionicons style={{ color: '#4F4F4F', left: WP('8.3%') }} name="md-more" size={HP('5%')} />
</TouchableOpacity>
<View style={contactSubContainer}>
<Ionicons style={{ color: '#E91E63' }} name="md-contact" size={HP('8%')} />
<View style={phoneContainer}>
<View style={phoneSubContainer}>
<Image source={require('../img/Arrow.png')} style={arrowImage} />
<Text style={phoneStyle}>+7(905)-884-23-89</Text>
</View>
<Text style={timeStyle}>10:05 Feb 23 at 15:14</Text>
</View>
</View>
<TouchableOpacity onPress={console.log('Right icon presssed')}>
<Ionicons style={{ color: '#4F4F4F', right: WP('6%') }} name="ios-close" size={HP('8%')} />
</TouchableOpacity>
</View>
<View style={{ backgroundColor: '#0D8B4E', height: HP('0.3%'), width: '100%' }} />
<View style={callDurationContainer}>
<TouchableOpacity onPress={console.log('Right icon presssed')}>
<Ionicons style={{ color: '#4F4F4F', left: WP('4%') }} name="md-pause" size={HP('3.4%')} />
</TouchableOpacity>
<View style={durationSubContainer}>
<Text style={textDurationStyle}>{callDuration}:00 / 10:05</Text>
<Slider
style={slider}
minimumValue={0}
maximumValue={60}
minimumTrackTintColor="#FEDA5A"
maximumTrackTintColor="rgba(0, 0, 0, 0.26)"
onValueChange={changeCallDuration}
step={1}
thumbTintColor="#FEDA5A"
thumbStyle={thumb}
trackStyle={track}
value={callDuration}
/>
</View>
<TouchableOpacity onPress={console.log('Right icon presssed')}>
<Ionicons
style={{ color: '#4F4F4F', position: 'relative', right: WP('4%') }}
name="md-folder"
size={HP('4.2%')}
/>
</TouchableOpacity>
</View>
<View style={tagsContainer}>
<View style={tagsCounter}>
<Text style={tagsText}>Tags (2 / 5)</Text>
</View>
<View style={defaultTagsContainer}>
<View style={defaultTag}>
<Text style={defaultTagText}>Important</Text>
</View>
<View style={defaultTag}>
<Text style={defaultTagText}>Sligthly important</Text>
</View>
</View>
<View style={userTagsContainer}>
<View style={addTag}>
<Ionicons style={{ color: '#4F4F4F', left: WP('3%') }} name="ios-add" size={HP('4.2%')} />
<TextInput
onSubmitEditing={onSubmitEditing}
placeholder="Add new..."
style={userTagInput}
value={userTag}
/>
</View>
{userTags}
</View>
</View>
<View style={commentContainer}>
<Text>Comment container</Text>
</View>
<View style={buttonContainer}>
<Text>Button container</Text>
</View>
</View>
</Modal>
</KeyboardAvoidingView>
)
}