React Native, UI Kitten Ввод пользовательского стиля по умолчанию и состояний onFocus - PullRequest
Новая
       43

React Native, UI Kitten Ввод пользовательского стиля по умолчанию и состояний onFocus

0 голосов
/ 16 февраля 2020

Мне нужна помощь по созданию пользовательского стиля ввода по умолчанию и состояниям 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)

Любая помощь может быть благодарной.

Ответы [ 2 ]

0 голосов
/ 17 февраля 2020

Вам не нужно реализовывать эти интерфейсы, если вы следуете руководству Branding . Вы можете изменять основные цвета везде, чтобы ваше приложение следовало единому источнику правды о стилях.

0 голосов
/ 16 февраля 2020

Наконец-то я нашел решение. Я пишу, чтобы помочь другим, кто использует response-native-ui-kitten.

InputComponent реализует интерфейс WebEventResponderCallbacks, поэтому => 

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

Я не знаю причину, по которой onMouseEnter, onMouseLeave или любые другие методы InputComponent бесполезны, но onFocus и onBlur работают.

...