React Native， UI Kitten 默认和焦点状态上的自定义样式

Question

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

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( 上不存在

任何帮助都可以感激不尽。

Answer 1

onMouseEnter和onMouseLeave将不起作用，除非您构建自定义组件，然后仅当您使用TouchableWeb时。此外，它仅适用于网络(手机或平板电脑上没有悬停事件(。

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

Answer 2

终于，我找到了解决方案。我正在写信来帮助其他使用反应原生 ui-kitten 的人。

InputComponent 实现了 WebEventResponderCallbacks 接口，因此 =>

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

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

Answer 3

如果您遵循品牌指南，则无需实现这些接口。你可以在任何位置更改原色，以便你的应用遵循有关样式的单一事实来源。