Как я могу изменить цвет значка без повторного рендеринга (текстовое поле теряет фокус)

Я использую пакет под названием react-native-phone-input, и при изменении номера телефона он запускает функцию this.updateInfo(), которая обновляет состояние. В моем коде цвет значка зависит от состояния и изменяется в зависимости от того, действителен ли номер телефона. Это работает, однако, когда состояние изменяется, экран перерисовывается, а клавиатура закрывается, поскольку текстовое поле теряет фокус. Есть ли другой способ изменить цвет значков? Или есть способ сохранить фокус на текстовом поле?

Это то, что я имею в виду:

введите здесь описание изображения

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, TextInput, Keyboard} from 'react-native';
import { Icon } from 'react-native-elements';

import KeyboardAccessory from 'react-native-sticky-keyboard-accessory';
import PhoneInput from 'react-native-phone-input';

export default class PhoneLogin extends Component {

    constructor() {
        super();

        this.state = {
            valid: "",
            type: "",
            value: "",
            iconColor: "#D3D3D3",
        };

        this.updateInfo = this.updateInfo.bind(this);
    }

    updateInfo() {
        this.setState({
            valid: this.phone.isValidNumber(),
            type: this.phone.getNumberType(),
            value: this.phone.getValue().replace(/[- )(]/g,''),
        });
    }

    render() {
        return (
          <View style={styles.container}>
            <PhoneInput
              ref={ref => {
                this.phone = ref;
              }}
              style={{height: 50, borderColor:'#44c0b9', borderBottomWidth:2}}
              onChangePhoneNumber={ (phone) => {this.updateInfo()} }
            />

            <KeyboardAccessory backgroundColor="#fff">
                <View style={{ alignItems: 'flex-end', padding:10 }}>
                    <Icon
                        raised
                        reverse
                        color={(this.state.valid) ? "#44c0b9" : "#D3D3D3"}
                        name='arrow-right'
                        type='font-awesome'
                        onPress={ Keyboard.dismiss()}
                    />
                </View>
            </KeyboardAccessory>
          </View>
        );
    }

}

let styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: "center",
      padding: 20,
      paddingTop: 60
    },
    info: {
      // width: 200,
      borderRadius: 5,
      backgroundColor: "#f0f0f0",
      padding: 10,
      marginTop: 20
    },
    button: {
      marginTop: 20,
      padding: 10
    }
  });

person Anthony Sette    schedule 20.08.2018    source источник


Ответы (1)


В вашем onPress вашего значка вам нужно отправить функцию стрелки.

Иконка должна быть такой

<Icon 
    raised
    reverse
    color={(this.state.valid) ? "#44c0b9" : "#D3D3D3"
    name='arrow-right'
    type='font-awesome'
    onPress={() => Keyboard.dismiss()}
/>

Проблема заключалась в том, что Keyboard.dismiss() немедленно запускался каждый раз, когда компонент повторно отображался, что отключало вашу клавиатуру.

Надеюсь это поможет!

person Bradey Whitlock    schedule 20.08.2018
comment
О боже!!! Я застрял на этом несколько дней, я не понимал, что это не связано с onChangePhonenumber(). Спасибо большое, вы не представляете, как я тупой! - person Anthony Sette; 21.08.2018