react-native - focus() 不适用于 React Native 中的原生基础 float 标签 textInput

Question

我无法聚焦到下一个 float 标签 TextInput .我的代码示例在这里。我得到的错误是 undefined is not a function(evaluating this.refs.LastName.focus()) .
有没有人遇到过这个问题？请帮助我，提前致谢。

<Item floatingLabel style={styles4.floatinglbl}>
<Label style={styles4.LblTxt}>First Name</Label>
<Input editable={true}
       value = {this.state.FirstName}
       returnKeyType={'next'}
       autoFocus={true}
       onChangeText={this.onFirstNameEditHandle}
       style={styles4.LblInpTxt}
       autoCapitalize={true}
       onSubmitEditing={(event) => {
         this.refs.LastName.focus();
       }}
/>
</Item>

<Item floatingLabel style={styles4.floatinglbl}>
    <Label style={styles4.LblTxt}>Last Name</Label>
    <Input editable={true}
     value={this.state.LastName}
     ref={'Lastname'}
     returnKeyType={'next'}
     onChangeText={this.onLastNameEditHandle}
     style={styles4.LblInpTxt}
     autoCapitalize={true}
    />
</Item>

Answer 1

天啊，这差点把我逼上墙。在试图弄清楚如何将光标从一个框移动到另一个框 30 分钟后，我终于把它整理出来了。如果有人不幸以某种方式与我处于相同的位置(想要将焦点从一个文本输入移到另一个文本输入......)，这显然是一种方法。我没有在任何文档或任何内容中看到这一点，我认为这在很大程度上只是 NativeBase 运作方式的一个怪癖。您不能引用 ref .您必须引用ref.wrappedInstance .我假设他们的 Input包裹 TextInput用于执行诸如floatingLabel之类的技巧。

        <Form>
          <Item floatingLabel>
            <Label>Username</Label>
            <Input
              autoCapitalize="none"
              autoCorrect={false}
              spellCheck={false}
              underlineColorAndroid="transparent"
              onChangeText={username => this.setState({ username })}
              value={username}
              blurOnSubmit={false}
              returnKeyType="next"
              onSubmitEditing={() => { this.passwordInput.focus() }}
            />
          </Item>
          <Item floatingLabel>
            <Label>Password</Label>
            <Input
              getRef={ref => {
                this.passwordInput = ref.wrappedInstance // <-- notice
              }}
              autoCapitalize="none"
              underlineColorAndroid="transparent"
              secureTextEntry={true}
              onChangeText={password => this.setState({ password })}
              onSubmitEditing={() => { this.submit() }}
              value={password}
            />
          </Item>
        </Form>