1

我需要一些关于在默认和 onFocus 状态下创建自定义输入样式的帮助。

import React, {useState} from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';
import {
  Input,
  Layout,
} from '@ui-kitten/components';

export const CustomInputExample = () => {
  const [ focusStatus, setFocusStatus ] = useState(false)

  const onMouseEnter = () => {
     setFocusStatus(true)
  }

  const onMouseLeave = () => {
     setFocusStatus(false)
  }

  return (
    <Layout>
      <Input
        style={focusStatus ? styles.customStyle : styles.basicStyle}
        status={focusStatus ? 'success' : 'basic'}
        placeholder='Success'
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
      />
    </Layout>
  );
};

const styles = StyleSheet.create({
  basicStyle: {
    borderColor: grey,
  },
  customStyle: {
    borderColor: '#3CB46E'
  },
});

但是，在我的情况下，这些方法都不起作用。我尝试过其他 InputProps，例如 focus、onTextFieldFocus、onTextFieldBlur……可能我不知道如何使用它们。

这也是来自 ts => 的错误

属性 'onMouseEnter' 不存在于类型'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly<...> & Readonly<...>'.ts(2322)

任何帮助都将不胜感激。

4

3 回答 3

1

onMouseEnter除非您构建自定义组件并且仅当您使用TouchableWebonMouseLeave时才会工作。此外，它仅适用于网络（手机或平板电脑上没有悬停事件）。

当然，这需要按照 UI-Kitten 的创建自定义组件映射说明编写自己的映射

于 2021-10-13T22:27:46.297 回答
0

At last, I've found the solution. I'am writing to help others who uses react-native-ui-kitten.

InputComponent implements WebEventResponderCallbacks interface so =>

export interface WebEventResponderCallbacks {
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
    onFocus?: () => void;
    onBlur?: () => void;
}

I don't know the reason why onMouseEnter, onMouseLeave or any other methods of InputComponent have no use but onFocus and onBlur are working.

于 2020-02-15T23:27:41.023 回答
0

如果您遵循品牌指南，则无需实现这些接口。您可以在任何地方更改原色，因此您的应用程序将遵循有关样式的单一事实来源。

于 2020-02-17T08:32:34.580 回答