React Native开发鸿蒙Next---RN键盘问题

.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px }
.markdown-body h1 { font-size: 24px; line-height: 38px; margin-bottom: 5px }
.markdown-body h2 { font-size: 22px; line-height: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(236, 236, 236, 1) }
.markdown-body h3 { font-size: 20px; line-height: 28px }
.markdown-body h4 { font-size: 18px; line-height: 26px }
.markdown-body h5 { font-size: 17px; line-height: 24px }
.markdown-body h6 { font-size: 16px; line-height: 24px }
.markdown-body p { line-height: inherit; margin-top: 22px; margin-bottom: 22px }
.markdown-body img { max-width: 100% }
.markdown-body hr { border-top: 1px solid rgba(221, 221, 221, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { text-decoration: none; color: rgba(2, 105, 200, 1); border-bottom: 1px solid rgba(209, 233, 255, 1) }
.markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(252, 252, 252, 1) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(203, 203, 203, 1); background-color: rgba(248, 248, 248, 1) }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
.markdown-body .contains-task-list { padding-left: 0 }
.markdown-body .task-list-item { list-style: none }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) }
.hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) }
.hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 }
.hljs-subst { font-weight: 400 }
.hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 }
.hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 }
.hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) }
.hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: 700 }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }

React Native开发鸿蒙Next---RN键盘问题

应用第一版开发的时候提到过RN下键盘不响应的问题：react-native-keyboard-aware-scroll-view无法处理键盘遮挡。调查了下是键盘的回调不响应。

现在硬是熬到了问题解决。

某次鸿蒙Next版本更新后，现在HarmonyRN下的ScrollView会自动去处理键盘遮挡组件了。RN里的Keyboard组件依然无法收到各种监听，但可以执行dismiss。

无话可说，可以用下面的代码测试下，基于react-native-keyboard-aware-scroll-view的demo。

import React, {useState, useRef, useEffect} from 'react';
import ReactNative, {
  TextInput,
  StyleSheet,
  Button,
  View,
  Text,
  ScrollView,
  Keyboard
} from 'react-native';
import {KeyboardAwareScrollView} from '@react-native-oh-tpl/react-native-keyboard-aware-scroll-view';
const Labels = [
  'Username',
  'Password',
  'Firstname',
  'Lastname',
  'Address',
  'Phone',
  'Email',
  'QQ',
  'WeChat',
  'Webo',
];
// function Test(): JSX.Element {
export const Test: React.FC = (): JSX.Element => {
  const [resetScrollToCoords, setResetScrollToCoords] = useState({
    x: 20,
    y: 20,
  });
  const [enableAutomaticScroll, setEnableAutomaticScroll] = useState(false);
  const [extraHeight, setExtraHeight] = useState(50);
  const [extraScrollHeight, setExtraScrollHeight] = useState(60);
  const [enableResetScrollToCoords, setEnableResetScrollToCoords] =
    useState(false);
  /**
   * 模拟componentDidMount，即只运行一次该函数
   */
  useEffect(() => {
    // | 'keyboardWillShow'
    // | 'keyboardDidShow'
    // | 'keyboardWillHide'
    // | 'keyboardDidHide'
    // | 'keyboardWillChangeFrame'
    // | 'keyboardDidChangeFrame';
    console.log('注册键盘事件');
    const willShow = Keyboard.addListener('keyboardWillShow', () => {
      console.log('keyboardWillShow');
    })
    const didShow = Keyboard.addListener('keyboardDidShow', () => {
      console.log('keyboardDidShow');
    })
    const willHide = Keyboard.addListener('keyboardWillHide', () => {
      console.log('keyboardWillHide');
    })
    const didHide  = Keyboard.addListener('keyboardDidHide', () => {
      console.log('keyboardDidHide');
    })
    const willChange = Keyboard.addListener('keyboardWillChangeFrame', () => {
      console.log('keyboardWillChangeFrame');
    })
    const didChange = Keyboard.addListener('keyboardDidChangeFrame', () => {
      console.log('keyboardDidChangeFrame');
    })
    return () => {
      willShow.remove();
      didShow.remove();
      willHide.remove();
      didHide.remove();
      willChange.remove();
      didChange.remove();
  }, []);
  return (
    // <KeyboardAwareScrollView
    //   style={styles.scroll}
    //   resetScrollToCoords={resetScrollToCoords}
    //   enableAutomaticScroll={enableAutomaticScroll}
    //   extraHeight={extraHeight}
    //   extraScrollHeight={extraScrollHeight}
    //   enableResetScrollToCoords={enableResetScrollToCoords}>
    <ScrollView
      style={styles.scroll}
      >
      <Button title="关闭键盘"  onPress={() => {
        Keyboard.dismiss();
      }}/>
      {Labels.map(item => {
        return (
          <View key={item}>
            <Text>{item}:</Text>
            <TextInput style={styles.input} placeholder="请输入" />
          </View>
        );
      })}
    </ScrollView>
    // </KeyboardAwareScrollView>
  );
};
const styles = StyleSheet.create({
  scroll: {
    backgroundColor: '#f0f0f0',
  },
  input: {
    width: 300,
    marginLeft: 20,
    borderWidth: 2,
    borderColor: 'black',
    height: 40,
    borderRadius: 10,
    fontSize: 26,
    paddingLeft: 6,
    marginTop: 10,
    marginBottom: 10,
  },
});

---

有问题可在微信公众号或者掘金社区私信留言

更多内容可关注\

我的公众号悬空八只脚