KeyboardAvoidingView не работает должным образом
Я пытаюсь использовать KeyboardAvoidingView с behavior="padding"
.
По какой-то причине, когда я пытаюсь ввести любой текст в TextInput
, под TextInput
есть пробел. Приложено изображение того, что происходит, а также код. Есть ли у кого-нибудь шанс понять, что здесь происходит?
render() {
return (
<KeyboardAvoidingView style={{ flex: 1}} behavior="padding">
< View
style={{
flex: 1,
backgroundColor: "#FFFFFF",
}}
>
<ScrollView
contentContainerStyle={{ justifyContent: "flex-end", flex: 1 }}>
<ChatInfo />
</ScrollView>
<View style={styles.container}>
<TextInput
style={styles.input}
underlineColorAndroid="transparent"
autoCapitalize="none"
onChangeText={text => this.setState({ text: text })}
value={this.state.text}
/>
<TouchableOpacity
style={styles.submitButton}
onPress={this.submitName}
>
<Text style={styles.submitButtonText}> SEND </Text>
</TouchableOpacity>
</View>
</ View>
</KeyboardAvoidingView>
);
}
}
export default connect()(ChatScreen);
const styles = StyleSheet.create({
input: {
margin: 2,
paddingLeft: 15,
flex: 1,
height: 40,
padding: 10,
fontSize: 14,
fontWeight: "400"
},
container: {
borderTopWidth: 1,
minWidth: "100%",
borderColor: "#cccccc",
height: 44,
flexDirection: "row",
justifyContent: "space-between",
backgroundColor: "#fff"
},
submitButtonText: {
color: "#0a9ffc",
fontSize: 14,
fontWeight: "500"
},
submitButton: {
backgroundColor: "#fff",
padding: 10,
margin: 2,
height: 40,
alignItems: "center",
justifyContent: "center"
}
});