在react-native中管理聚焦多个TextInputs (比10+更多)

在React Native中管理聚焦多个TextInputs可以通过使用refs和state来实现。下面是一个示例代码：

import React, { Component } from 'react';
import { TextInput, View } from 'react-native';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputs: [],
    };
  }

  addInput = () => {
    const inputs = this.state.inputs;
    inputs.push({ ref: React.createRef() });
    this.setState({ inputs });
  };

  focusNextInput = (index) => {
    if (index < this.state.inputs.length - 1) {
      this.state.inputs[index + 1].ref.current.focus();
    }
  };

  render() {
    return (
      <View>
        {this.state.inputs.map((input, index) => (
          <TextInput
            key={index}
            ref={input.ref}
            onSubmitEditing={() => this.focusNextInput(index)}
          />
        ))}
      </View>
    );
  }
}

export default MyComponent;

在这个示例中，我们使用了一个数组来存储所有的TextInput的引用。当用户点击添加按钮时，我们会在数组中添加一个新的输入框，并更新state。每个TextInput都有一个ref属性，用于获取对应的TextInput实例的引用。当用户在一个输入框中按下提交按钮时，我们会调用focusNextInput函数来将焦点切换到下一个输入框。

这种方法可以用于管理任意数量的TextInput，并且可以根据需要进行扩展和定制。它适用于需要在React Native应用中处理多个输入框的场景，比如表单、聊天界面等。

腾讯云相关产品和产品介绍链接地址：