React Native TextInput:没有带硬件键盘的换行符输入键

时间:2017-08-23 09:33:51

标签: react-native keyboard textinput android-hardware-keyboard

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

TextInput设置非常基本:

<TextInput multiline={true} />

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

4 个答案:

答案 0 :(得分:2)

我遇到了同样的问题,但以下内容对我有用:

returnKeyType='none'

答案 1 :(得分:0)

试试吧!它也在线的中间工作!

<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
}

}

答案 2 :(得分:0)

不客气:blurOnSubmit={true}

答案 3 :(得分:0)

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

这对我有用