React Native多行TextInput滚动卡顿回弹+滚动时自动唤起键盘问题求助
React Native多行TextInput滚动卡顿回弹+滚动时自动唤起键盘问题求助
各位好,我现在遇到个React Native的棘手问题:我在全屏模态框里做了一个多行TextInput,原本想实现滚动查看文本时键盘不弹出,只有点击输入框编辑时才唤起键盘,但现在滚动的时候键盘会自动弹出来,而且滚动手感特别黏滞,最后还会直接弹回初始位置,完全没法正常滚动浏览内容。
先把相关代码片段贴出来,方便大家帮我排查问题:
相关状态与副作用逻辑
const [noteContent, setNoteContent] = useState(''); const [isProcessingImage, setIsProcessingImage] = useState(false); const [isImportingFile, setIsImportingFile] = useState(false); const [isContentFullScreen, setIsContentFullScreen] = useState(false); const [isModalInputFocused, setIsModalInputFocused] = useState(false); const contentInputRef = useRef(null); const keyboardDismissButtonOpacity = useRef(new Animated.Value(0)).current; // 全屏模态框切换时重置关闭按钮透明度与输入框焦点状态 useEffect(() => { Animated.timing(keyboardDismissButtonOpacity, { toValue: 0, duration: 0, useNativeDriver: true, }).start(); setIsModalInputFocused(false); }, [isContentFullScreen]);
全屏模态框内的TextInput组件
<Modal visible={isContentFullScreen} animationType="fade" onRequestClose={() => setIsContentFullScreen(false)} > <SafeAreaView style={{ flex: 1, backgroundColor: '#F5E8C7' }}> <View style={styles.modalHeaderContainer}> <Text style={styles.modalSectionTitle}>Edit Note</Text> <TouchableOpacity style={styles.modalSaveButton} onPress={handleSaveNote}> <Text style={styles.buttonText}>Save</Text> </TouchableOpacity> <TouchableOpacity style={styles.modalCloseButtonCircle} onPress={() => { setIsContentFullScreen(false); if (contentInputRef.current) { contentInputRef.current.blur(); } }} > <Ionicons name="close" size={20} color="#FFF" /> </TouchableOpacity> </View> <View style={{ paddingHorizontal: wp(16) }}> <TextInput ref={contentInputRef} style={[styles.input, styles.multilineInputModal]} value={noteContent} onChangeText={setNoteContent} multiline={true} textAlignVertical="top" editable={!isProcessingImage && !isImportingFile} placeholder="Import or write your note here..." placeholderTextColor="#A8B5A2" scrollEnabled={true} onFocus={() => { setIsModalInputFocused(true); Animated.timing(keyboardDismissButtonOpacity, { toValue: 1, duration: 300, useNativeDriver: true, }).start(); }} onBlur={() => { setIsModalInputFocused(false); Animated.timing(keyboardDismissButtonOpacity, { toValue: 0, duration: 300, useNativeDriver: true, }).start(); }} /> </View> <Animated.View style={[styles.dismissKeyboardButtonContainer, { opacity: keyboardDismissButtonOpacity }]} pointerEvents={isModalInputFocused ? 'auto' : 'none'} > <TouchableOpacity style={styles.dismissKeyboardButton} onPress={() => { Keyboard.dismiss(); if (contentInputRef.current) { contentInputRef.current.blur(); } }} activeOpacity={0.7} > <Ionicons name="arrow-down" size={24} color="#fff" /> </TouchableOpacity> </Animated.View> </SafeAreaView> </Modal>
关联样式定义
// 属于StyleSheet.create的部分 multilineInputModal: { height: hp(675), paddingTop: hp(12), marginBottom: 0, }, dismissKeyboardButtonContainer: { position: 'absolute', left: wp(35), alignItems: 'center', zIndex: 10, bottom: hp(365), }, dismissKeyboardButton: { backgroundColor: '#aaafbb', borderRadius: 50, width: wp(60), height: hp(60), justifyContent: 'center', alignItems: 'center', shadowColor: '#d0d3dc', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, },
我的核心诉求是:让这个多行TextInput能自由滚动浏览文本,滚动过程中不会自动唤起键盘,只有主动点击输入框时才弹出键盘进入编辑状态,同时解决滚动卡顿回弹的问题。有没有大佬能帮忙看看哪里出了问题,或者有什么可行的优化方案?
内容来源于stack exchange
相关产品推荐
相关产品推荐

