React Native在键盘出现/隐藏时启用/禁用ScrollView

x9ybnkn6  于 6个月前  发布在  React
关注(0)|答案(2)|浏览(75)

我想禁用滚动键盘时隐藏和键盘出现时启用。
任何帮助都将不胜感激。先谢谢你。
React Native版本:0.50.3

rt4zxlrg

rt4zxlrg1#

https://facebook.github.io/react-native/docs/keyboard.html
有键盘显示和隐藏的监听器。
您可以使用这些功能keyboardDidshow和keyboardDidHide来启用和禁用scrollView。

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

class Example extends Component {
  componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  state {
    toScroll: false
  }

  componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow () {
    this.setState({ toScroll: true });
  }

  _keyboardDidHide () {
    this.setState({ toScroll: false });
  }

  render() {
    const { toScroll } = this.state;
    return (
      <ScrollView scrollEnabled={toScroll}>
        <View />
      </ScrollView>
    );
  }
}

字符串

ws51t4hk

ws51t4hk2#

你也可以使用函数组件和钩子useState、useEffect。

import React, { useState, useCallback, useEffect } from "react";
import {
  Keyboard,
  ScollView,
  View,
} from "react-native";

const MyComponent = () => {
  const [scrollEnabled, setScrollEnabled] = useState(false);
  
  const keyboardDidShow = useCallback(() => {
    // show keyboard
    setScrollEnabled(false);
  }, []);

  const keyboardDidHide = useCallback(() => {
    // hide keyboard
    setScrollEnabled(true);
  }, []);

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      "keyboardDidShow",
      keyboardDidShow
    );
    const keyboardDidHideListener = Keyboard.addListener(
      "keyboardDidHide",
      keyboardDidHide
    );

    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, []);

  return (
    <ScrollView scrollEnabled={scrollEnabled}>
      <View />
    </ScrollView>
  );
}

字符串

相关问题