React Native 0.50.3：键盘显隐时控制ScrollView启用/禁用

Hey there! I’ve tackled a similar requirement back when working with React Native 0.50.3, so let me walk you through how to make this work smoothly.

The core idea is to listen for keyboard show/hide events, update a state variable to control the ScrollView’s scrollEnabled prop, and clean up listeners properly to avoid memory leaks. Here’s the step-by-step implementation:

Step 1: Set Up Component State #

First, create a class component (since hooks weren’t officially stable in RN 0.50.3) and add a state variable to track scrollability.

import React, { Component } from 'react';
import { ScrollView, Keyboard, View, TextInput } from 'react-native';

class ScrollControlledComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isScrollEnabled: false, // Disable scroll by default when keyboard is hidden
    };

    // Bind handlers to maintain component context
    this.handleKeyboardShow = this.handleKeyboardShow.bind(this);
    this.handleKeyboardHide = this.handleKeyboardHide.bind(this);
  }

Step 2: Register Keyboard Event Listeners #

In componentDidMount, add listeners for keyboard events. We’ll use keyboardDidShow and keyboardDidHide because they fire reliably after the keyboard has fully appeared/disappeared in RN 0.50.3.

componentDidMount() {
  // Attach keyboard event listeners
  this.keyboardShowListener = Keyboard.addListener(
    'keyboardDidShow',
    this.handleKeyboardShow
  );
  this.keyboardHideListener = Keyboard.addListener(
    'keyboardDidHide',
    this.handleKeyboardHide
  );
}

Step 3: Implement Event Handlers #

These functions update the state to toggle scrollability when the keyboard changes visibility.

handleKeyboardShow() {
  this.setState({ isScrollEnabled: true });
}

handleKeyboardHide() {
  this.setState({ isScrollEnabled: false });
}

Step 4: Clean Up Listeners #

Always remove listeners when the component unmounts to prevent memory leaks—critical in older React Native versions.

componentWillUnmount() {
  // Clean up the event listeners
  this.keyboardShowListener.remove();
  this.keyboardHideListener.remove();
}

Step 5: Apply Scroll Control to ScrollView #

Pass the state variable to the ScrollView’s scrollEnabled prop to control scrolling.

render() {
  return (
    <ScrollView
      scrollEnabled={this.state.isScrollEnabled}
      contentContainerStyle={{ padding: 20, minHeight: 1000 }}
    >
      {/* Your content here—add inputs and other elements to test */}
      <TextInput 
        placeholder="Tap to show keyboard" 
        style={{ borderWidth: 1, padding: 10, marginBottom: 20 }} 
      />
      <TextInput 
        placeholder="Another input" 
        style={{ borderWidth: 1, padding: 10, marginBottom: 20 }} 
      />
      {/* Add more content to test scrolling when keyboard is visible */}
    </ScrollView>
  );
}
}

export default ScrollControlledComponent;

Quick Notes for RN 0.50.3: #

• Avoid using keyboardWillShow/keyboardWillHide—these can fire before the keyboard fully adjusts the view, leading to inconsistent behavior.
• Test on both iOS and Android: keyboard behavior can vary slightly, but this approach works consistently across both platforms in 0.50.3.
• If you’re using a functional component (experimental hooks in this version), you can replicate the lifecycle logic with useEffect, but class components are the safer, more supported choice here.

内容的提问来源于stack exchange，提问作者B. Godoak