React Native - текст исчезает при изменении стиля пользовательского компонента - PullRequest
Новая
       9

React Native - текст исчезает при изменении стиля пользовательского компонента

0 голосов
/ 22 октября 2018

Получение странной ошибки при попытке применить условный стиль к пользовательскому компоненту.Всякий раз, когда должно произойти изменение стиля, текст полностью исчезает.Если я начну печатать снова, появится новый стиль, но как только стиль снова изменится, текст снова исчезнет.Если я применяю стиль как статический, пользовательский стиль работает совершенно нормально.Я не уверен, что проблема может быть.Заранее спасибо за помощь. 

        <UserInput
          style = {!this.state.isValidEmail ? styles.errorInline : styles.default}
          placeholder="Email"
          autoCapitalize={'none'}
          returnKeyType={'next'}
          autoCorrect={false}
          onSubmitEditing={() => this.focusNextField('password')}
          updateState={(email) => {
            let formattedEmail = email.trim();
            this.state.initialValidationChecked? this.validate(formattedEmail) : this.setState({formattedEmail})}
          } 
          blurOnSubmit={true}
          onBlur2={(event) => this.validate(event.nativeEvent.text.trim())}
        />


errorInline: {
    color: 'red',
},
default : {
    color: '#777777'
}


export default class UserInput extends Component {

  componentDidMount() {
    if (this.props.onRef != null) {
        this.props.onRef(this)
    }
  }

  onSubmitEditing() {
      if(this.props.onSubmitEditing){
          this.props.onSubmitEditing();
      }
  }

  focus() {
    this.textInput.focus();
  }

  render() {
    return (
      <View style={styles.inputWrapper}>
        <TextInput
          style={[styles.input, this.props.style]}
          placeholder={this.props.placeholder}
          secureTextEntry={this.props.secureTextEntry}
          autoCorrect={this.props.autoCorrect}
          autoCapitalize={this.props.autoCapitalize}
          returnKeyType={this.props.returnKeyType}
          onChangeText={(value) => this.props.updateState(value)}
          onEndEditing={(value) => {  if(this.props.onBlur2) return this.props.onBlur2(value)}}
          ref={input => this.textInput = input}
          blurOnSubmit={this.props.blurOnSubmit}
          onSubmitEditing={this.onSubmitEditing.bind(this)}
          underlineColorAndroid='transparent'
        />
      </View>
    );
  }

}

UserInput.propTypes = {
  placeholder: PropTypes.string.isRequired,
  secureTextEntry: PropTypes.bool,
  autoCorrect: PropTypes.bool,
  autoCapitalize: PropTypes.string,
  returnKeyType: PropTypes.string,
};

const DEVICE_WIDTH = Dimensions.get('window').width;

const styles = StyleSheet.create({
  input: {
    width: DEVICE_WIDTH - 70,
    height: 40,
    marginHorizontal: 20,
    marginBottom: 30,
    color: '#777777',
    borderBottomWidth: 1, 
    borderBottomColor: '#0099cc'
  },
  inputWrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
});

1 Ответ

0 голосов
/ 22 октября 2018

Стили даны как объект (пара ключ-значение).Но глядя на ваши коды в следующей строке 

style = {!this.state.isValidEmail ? styles.errorInline : 'none'}

Когда this.state.isValidEmail возвращает true, вы просто даете 'none' стилю, что является синтаксической ошибкой, вы должны вернуть что-то вродеэто 

style = {!this.state.isValidEmail ? styles.errorInline : {display: 'none'}}
...