如何在react native中集中下一个字段输入？

Question

我需要在android平台的react native中关注下一个字段输入。但是focus（）函数在android react native中不存在，仅在IOS中存在。

这是怎么做的？我将react native与typescript一起使用。

Answer 1

这是我的工作：

<Input
  blurOnSubmit={false}
  returnKeyType="next"
  onSubmitEditing={() => {
    this.passwordInput.wrappedInstance.focus();
  }}
/>
<Input
  secureTextEntry
  ref={(input) => {
    this.passwordInput = input;
  }}
/>

Answer 2

您必须在您希望关注的输入上使用ref：

<Input
   ref={(node) => { this.myInput = node }}
   value={this.state.myInput.toString()}
   onSubmitEditing={() => { this.myOtherInput.focus() }}/>
<Input
   ref={(node) => { this.myOtherInput = node }}
   value={this.state.myOtherInput.toString()}/>

您可以看到，当您提交对第一个输入的编辑时，您将关注第二个输入。你可以用这个。MY_CUSTOM_REF.focus（）可以在任何地方使用。

Answer 3

聚焦功能工作得很好。

<View style={{flexDirection: 'row'}}>
        <Text style={{flex: 1}}>Enter Name: </Text>
        <TextInput ref="name" onChangeText={(name) => this.setState({name})} style={{flex: 1}}
          onSubmitEditing={() => this.refs.age.focus()}/>
      </View>
      <View style={{flexDirection: 'row'}}>
        <Text style={{flex: 1}}>Enter Age: </Text>
        <TextInput ref="age" keyboardType="numeric" onChangeText={(age) => this.setState({age})} style={{flex: 1}}
          onSubmitEditing={() => this.refs.sport.focus()}/>
      </View>
      <View style={{flexDirection: 'row'}}>
        <Text style={{flex: 1}}>Enter Favourite Sport: </Text>
        <TextInput ref="sport" onChangeText={(sport) => this.setState({sport})} style={{flex: 1}}/>
      </View>

希望这能有所帮助。这是为Android。