我定义了两个TextInput字段如下:

<TextInput 
   style = {styles.titleInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "Title" />
<TextInput
   style = {styles.descriptionInput}          
   multiline = {true}
   maxLength = {200}
   placeholder = "Description" />

但在按下键盘上的“next”按钮后,我的react-native应用程序并没有跳转到第二个TextInput字段。我怎样才能做到呢?

谢谢!


当前回答

<TextInput placeholder="Nombre"
    ref="1"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.First_Name}
    onChangeText={First_Name => this.setState({ First_Name })}
    onSubmitEditing={() => this.focusNextField('2')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

<TextInput placeholder="Apellido"
    ref="2"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.Last_Name}
    onChangeText={Last_Name => this.setState({ Last_Name })}
    onSubmitEditing={() => this.focusNextField('3')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

和add方法

focusNextField(nextField) {
    this.refs[nextField].focus();
}

其他回答

<TextInput 
    keyboardType="email-address"
    placeholder="Email"
    returnKeyType="next"
    ref="email"
    onSubmitEditing={() => this.focusTextInput(this.refs.password)}
    blurOnSubmit={false}
 />
<TextInput
    ref="password"
    placeholder="Password" 
    secureTextEntry={true} />

并添加方法onSubmitEditing={() => this.focusTextInput(this.ref .password)}如下所示:

private focusTextInput(node: any) {
    node.focus();
}

如果你正在使用NativeBase作为UI组件,你可以使用这个示例

<Item floatingLabel>
    <Label>Title</Label>
    <Input
        returnKeyType = {"next"}
        autoFocus = {true}
        onSubmitEditing={(event) => {
            this._inputDesc._root.focus(); 
        }} />
</Item>
<Item floatingLabel>
    <Label>Description</Label>
    <Input
        getRef={(c) => this._inputDesc = c}
        multiline={true} style={{height: 100}} />
        onSubmitEditing={(event) => { this._inputLink._root.focus(); }} />
</Item>

使用回调引用而不是遗留的字符串引用:

<TextInput
    style = {styles.titleInput}
    returnKeyType = {"next"}
    autoFocus = {true}
    placeholder = "Title"
    onSubmitEditing={() => {this.nextInput.focus()}}
/>
<TextInput
    style = {styles.descriptionInput}  
    multiline = {true}
    maxLength = {200}
    placeholder = "Description"
    ref={nextInput => this.nextInput = nextInput}
/>

RN没有某种类型的Tabindex系统,这很令人恼火。

一个功能性组件,对于我的用例,我有一个字符串id数组用于输入,我遍历并显示每个文本输入。下面的代码将自动跳过所有这些,阻止键盘在字段之间消失/重新出现,并在结束时解散它,还在键盘上显示适当的“动作”按钮。

Typescript, Native Base。

const stringFieldIDs = [ 'q1', 'q2', 'q3' ]; export default () => { const stringFieldRefs = stringFieldIDs.map(() => useRef < any > ()); const basicStringField = (id: string, ind: number) => { const posInd = stringFieldIDs.indexOf(id); const isLast = posInd === stringFieldIDs.length - 1; return ( < Input blurOnSubmit = { isLast } ref = { stringFieldRefs[posInd] } returnKeyType = { isLast ? 'done' : 'next' } onSubmitEditing = { isLast ? undefined : () => stringFieldRefs[posInd + 1].current._root.focus() } /> ); }; return stringFieldIDs.map(basicStringField); };

从React Native 0.36开始,不再支持在文本输入节点上调用focus()(在其他几个答案中建议)。相反,你可以使用React Native中的TextInputState模块。我创建了以下帮助模块,使这更容易:

// TextInputManager
//
// Provides helper functions for managing the focus state of text
// inputs. This is a hack! You are supposed to be able to call
// "focus()" directly on TextInput nodes, but that doesn't seem
// to be working as of ReactNative 0.36
//
import { findNodeHandle } from 'react-native'
import TextInputState from 'react-native/lib/TextInputState'


export function focusTextInput(node) {
  try {
    TextInputState.focusTextInput(findNodeHandle(node))
  } catch(e) {
    console.log("Couldn't focus text input: ", e.message)
  }
}

然后,您可以在TextInput的任何“ref”上调用focusTextInput函数。例如:

...
<TextInput onSubmit={() => focusTextInput(this.refs.inputB)} />
<TextInput ref="inputB" />
...