我们将
虽然可以输入表情符号,但用户无法再看到自己的文本内容。
以下是我们的代码:
TextInput
放在KeyboardAvoidingView
中,一切都很好,直到用户切换键盘以选择表情符号。此时,键盘的大小会发生变化,并覆盖TextInput
。虽然可以输入表情符号,但用户无法再看到自己的文本内容。
以下是我们的代码:
const headerHeight = useHeaderHeight();
...
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
keyboardVerticalOffset={headerHeight}
style={styles.screen}
>
<ScrollView keyboardShouldPersistTaps="handled">
<View style={styles.radContainer}>
<TextInput
style={styles.addCommentInput}
value={comment}
onChangeText={changeCommentHandler}
onSubmitEditing={() => {
sendCommentHandler();
}}
/>
</View>
</ScrollView>
</KeyboardAvoidingView>
...
const styles = StyleSheet.create({
screen: {
alignContent: "space-between",
backgroundColor: styleConstants.colors.silver03,
flex: 1,
marginBottom: 10,
},
radContainer: {
padding: 10,
},
addCommentInput: {
backgroundColor: "#fff",
borderColor: styleConstants.colors.silver01,
borderRadius: 8,
borderWidth: 1,
fontFamily: "work-sans_regular",
fontSize: 14,
height: 40,
paddingBottom: 8,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 8,
textAlignVertical: "center",
},
});
我们正在使用带有Expo SDK44的React Native。您所看到的GIF来自于在Nokia Android 10版本上进行的测试飞行二进制文件。