Как сделать вторую строку в текстовом вводе при вводе текста в React Native?

мне нужна вторая строка, если я ввел более 10 символов в textInput. Я изменил размер шрифта текста, если введено более 5 символов. то есть нормально работает.

Но если я введу более 11 символов, он должен появиться во второй строке.

пожалуйста, помогите мне очистить это

вот мой код...

_onChangeText(text) {
     this.setState({ fontSize: (text.lenght > 6 ? 40 : 80) });
 }

 render() {
return (
  // Giving an array of objects to style property can help                                                    
 you to define a default value
      <TextInput 
          onChangeText={this._onChangeText.bind(this)}
          style={[ {fontSize: 80}, {fontSize: this.state.fontSize} ]}
     />
   )
}

react-native onchange textinput
person Community    schedule 05.10.2017    source источник

Ответы (3)


arrow_upward
2
arrow_downward

вы можете сделать что-то вроде этого,

state = {
  fontSize: 80,
  inputValue: ''
}

onChangeText(event) {
  this.setState({
    fontSize: event.nativeEvent.text.length > 6 ? 40 : 80,
    inputValue: event.nativeEvent.text
  });
}

render() {
return (
  < TextInput
    multiline
    onChange={(event) =>
      this.onChangeText(event)
    }
    onContentSizeChange={(event) => {
      this.setState({ height: event.nativeEvent.contentSize.height })
    }}
    value={this.state.inputValue}
    style={{ fontSize: this.state.fontSize, height: Math.max(35, 
    this.state.height) }}
  />
    )
  }
}

установить многострочный и обрабатывать высоту вашего текстового ввода

person Ganesh Cauda    schedule 05.10.2017
comment
я должен добавить еще один метод этого onChangeText (событие) {}? @Ганеш Кауда - person ; 05.10.2017
comment
Вы можете использовать внешний метод, как я сделал в примере, или вы можете напрямую внедрить все внутри этого метода в onChange. - person Ganesh Cauda; 05.10.2017
comment
но если добавить multiline={true} после ввода, клавиатура не уходит в отставку - person ; 05.10.2017
comment
Если вы назначаете многострочный, нет необходимости ставить истину, она по умолчанию истинна. - person Ganesh Cauda; 05.10.2017
comment
да, все в порядке, но если ввод пустой, то многострочный не должен работать ... на клавиатуре iphone, если я нажму клавишу возврата, не вводя текст, он падает ... этого не должно происходить - person ; 05.10.2017
comment
если ввод пуст, ввод следующей строки с клавиатуры не должен работать @Ganesh Cauda - person ; 06.10.2017
comment
вы можете отключить кнопку ввода, если текст пуст, вот ссылка, как отключить ввод: stackoverflow.com/questions/39537486/ - person Ganesh Cauda; 07.10.2017

arrow_upward
4
arrow_downward

Установите свойство multiline на true. Для номера чек не требуется. символов. Он автоматически заботится о нет. символов, которые он может вместить в зависимости от ширины. У меня отлично работает -> введите здесь описание изображения

Если у вас есть конкретное требование в 10 символов, установите значение multiline как true, как только длина символов достигнет 10.

Документы доступны здесь

person Apurva jain    schedule 05.10.2017

arrow_upward
2
arrow_downward

Используйте свойство multiline (логическое) для определения необходимости отображения нескольких строк.

_onChangeText(text) {
  const areCharsExceeded = text.length > 10;

  this.setState({ areCharsExceeded });
}

 <TextInput
  multiline={this.state.areCharsExceeded}
  onChangeText={this._onChangeText.bind(this)}
/>
person Samuli Hakoniemi    schedule 05.10.2017
comment
у меня есть состояние внутри этой функции _onChageText (текст) ?? @звона - person ; 05.10.2017
comment
zvona пингуйте меня в чате, если вы свободны @zvona - person ; 05.10.2017