React Native，UI Kitten Input 默认和 onFocus 状态下的自定义样式答案

【问题标题】：React Native, UI Kitten Input custom style on default and onFocus statesReact Native，UI Kitten Input 默认和 onFocus 状态下的自定义样式
【发布时间】：2020-02-15 22:54:01
【问题描述】：

我需要一些关于在默认和 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)

任何帮助都将不胜感激。

【问题讨论】：

标签： react-native-ui-kitten

【解决方案1】：

onMouseEnter 和 onMouseLeave 将不起作用，除非您构建自定义组件，然后才使用 TouchableWeb。此外，它只能在网络上运行（手机或平板电脑上没有悬停事件）。

当然，这需要按照 UI-Kitten 的 Create a Custom Component Mapping 指示编写自己的映射

【讨论】：

【解决方案2】：

终于，我找到了解决方案。我写信是为了帮助其他使用 react-native-ui-kitten 的人。

InputComponent 实现了 WebEventResponderCallbacks 接口所以 =>

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

我不知道为什么 onMouseEnter、onMouseLeave 或 InputComponent 的任何其他方法都没有用但 onFocus 和 onBlur 工作。

【讨论】：

【解决方案3】：

如果您遵循Branding 指南，则无需实现这些接口。您可以在任何地方更改原色，以便您的应用遵循关于样式的单一事实来源。

【讨论】：