React Native TextInput：硬件键盘没有换行符 Enter 键

Posted 2023-04-18

【中文标题】React Native TextInput：硬件键盘没有换行符 Enter 键

【英文标题】：React Native TextInput: no newline with hardware keyboard Enter key

【发布时间】：2018-01-31 19:42:28

【问题描述】：

我们的应用中有一个 React Native TextInput 组件。使用虚拟键盘，按回车键创建一个新行。如果我们使用硬件键盘（使用 USB OTG 适配器连接到 android 6 平板电脑），Enter 键（键盘中间的大键盘）不会更改文本，TextInput 只会失去焦点。 Return 键（常用键盘右侧较小的那个）创建一个新行。

TextInput 的设置非常基础：

<TextInput multiline=true />

我为 returnKeyType 属性尝试了不同的值，但没有一个创建新行。我错过了什么吗？

【参考方案1】：

不客气：blurOnSubmit=true

【讨论】：

但是blurOnSubmit 会关闭键盘。有没有办法防止关闭键盘？

你才是真正的MVP

【参考方案2】：

我遇到了同样的问题，但以下对我有用：

returnKeyType='none'

【参考方案3】：

<TextInput 
    value=activity
    onChangeText=setActivity
    numberOfLines=5
    multiline=true
    style=styles.TextInput
    placeholder="Start your activity"
    keyboardType="name-phone-pad"
/>

这对我有用

【参考方案4】：

试试吧！它也适用于行的中间！

<TextInput
                  placeholder=I18n.t('enterContactQuery')

                  value=this.state.query
                  onChangeText=text => this.setState( query: text, allowEditing: true )

                  selection = this.state.selection
                  onSelectionChange=(event) => this.setState( cursorPosition: event.nativeEvent.selection, selection: event.nativeEvent.selection, allowEditing: true )
                  onSubmitEditing=() => 
                    const  query, cursorPosition  = this.state;
                    let newText = query;
                    const ar = newText.split('');
                    ar.splice(cursorPosition.start, 0, '\n');
                    newText = ar.join('');
                    if (cursorPosition.start === query.length && query.endsWith('\n')) 
                      this.setState( query: newText );
                     else if (this.state.allowEditing) 
                      this.setState(
                        query: newText,
                        selection: 
                          start: cursorPosition.start + 1,
                          end: cursorPosition.end + 1
                        ,
                        allowEditing: !this.state.allowEditing
                      );
                    
                  
                  multiline = true
                  numberOfLines = 10
                  blurOnSubmit=false
                  editable=true
                  // clearButtonMode="while-editing"
                />

constructor(props) 
super(props);
this.state = 
  query: '',
  cursorPosition: [0,0],
  selection: null,
  allowEditing: true