You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 08:33:01