我定义了两个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字段。我怎样才能做到呢?
谢谢!
当前回答
在你的组件中:
constructor(props) {
super(props);
this.focusNextField = this
.focusNextField
.bind(this);
// to store our input refs
this.inputs = {};
}
focusNextField(id) {
console.log("focus next input: " + id);
this
.inputs[id]
._root
.focus();
}
注意:我使用了._root，因为它是NativeBase' library ' Input中的TextInput的引用
在文本输入中，像这样
<TextInput
onSubmitEditing={() => {
this.focusNextField('two');
}}
returnKeyType="next"
blurOnSubmit={false}/>
<TextInput
ref={input => {
this.inputs['two'] = input;
}}/>
其他回答
<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();
}
<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();
}
如果您恰好像我一样使用tcomb-form-native，您也可以这样做。这里有一个技巧:不是直接设置TextInput的道具，而是通过选项来实现。您可以将表单的字段引用为:
this.refs.form.getComponent('password').refs.input.focus()
所以最终的产品看起来是这样的:
var t = require('tcomb-form-native');
var Form = t.form.Form;
var MyForm = t.struct({
field1: t.String,
field2: t.String,
});
var MyComponent = React.createClass({
_getFormOptions () {
return {
fields: {
field1: {
returnKeyType: 'next',
onSubmitEditing: () => {this.refs.form.getComponent('field2').refs.input.focus()},
},
},
};
},
render () {
var formOptions = this._getFormOptions();
return (
<View style={styles.container}>
<Form ref="form" type={MyForm} options={formOptions}/>
</View>
);
},
});
(感谢remcoanker在这里发布的想法:https://github.com/gcanti/tcomb-form-native/issues/96)
对于RN 0.50.3的我来说，这是可能的:
<TextInput
autoFocus={true}
onSubmitEditing={() => {this.PasswordInputRef._root.focus()}}
/>
<TextInput ref={input => {this.PasswordInputRef = input}} />
你必须看到这个。
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); };
