[英]How to autofocus next TextInput on react-native
我正在尝试创建一个受密码保护的屏幕。 屏幕将使用 4 个数字输入作为密码。
我这样做的方法是创建一个 TextInput 组件并在我的主屏幕中调用它 4 次。
我遇到的问题是,当我键入前一个 TextInput 的值时,TextInputs 不会关注下一个。
我正在为所有 PasscodeTextInput 组件使用 refs(我被告知这是一种遗留方法,但我不知道任何其他方式,唉)。
试过这种方法(没有创建我自己的组件),也不走运。 方法
index.ios.js
import React, { Component } from 'react';
import { AppRegistry, TextInput, View, Text } from 'react-native';
import { PasscodeTextInput } from './common';
export default class ProgressBar extends Component {
render() {
const { centerEverything, container, passcodeContainer, textInputStyle} = styles;
return (
<View style={[centerEverything, container]}>
<View style={[passcodeContainer]}>
<PasscodeTextInput
autoFocus={true}
ref="passcode1"
onSubmitEditing={(event) => { this.refs.passcode2.focus() }} />
<PasscodeTextInput
ref="passcode2"
onSubmitEditing={(event) => { this.refs.passcode3.focus() }} />
<PasscodeTextInput
ref="passcode3"
onSubmitEditing={(event) => { this.refs.passcode4.focus() }}/>
<PasscodeTextInput
ref="passcode4" />
</View>
</View>
);
}
}
const styles = {
centerEverything: {
justifyContent: 'center',
alignItems: 'center',
},
container: {
flex: 1,
backgroundColor: '#E7DDD3',
},
passcodeContainer: {
flexDirection: 'row',
},
}
AppRegistry.registerComponent('ProgressBar', () => ProgressBar);
密码文本输入.js
import React from 'react';
import {
View,
Text,
TextInput,
Dimensions
} from 'react-native';
const deviceWidth = require('Dimensions').get('window').width;
const deviceHeight = require('Dimensions').get('window').height;
const PasscodeTextInput = ({ ref, autoFocus, onSubmitEditing, onChangeText, value}) => {
const { inputStyle, underlineStyle } = styles;
return(
<View>
<TextInput
ref={ref}
autoFocus={autoFocus}
onSubmitEditing={onSubmitEditing}
style={[inputStyle]}
maxLength={1}
keyboardType="numeric"
placeholderTextColor="#212121"
secureTextEntry={true}
onChangeText={onChangeText}
value={value}
/>
<View style={underlineStyle} />
</View>
);
}
const styles = {
inputStyle: {
height: 80,
width: 60,
fontSize: 50,
color: '#212121',
fontSize: 40,
padding: 18,
margin: 10,
marginBottom: 0
},
underlineStyle: {
width: 60,
height: 4,
backgroundColor: '#202020',
marginLeft: 10
}
}
export { PasscodeTextInput };
更新 1
index.ios.js
import React, { Component } from 'react';
import { AppRegistry, TextInput, View, Text } from 'react-native';
import { PasscodeTextInput } from './common';
export default class ProgressBar extends Component {
constructor() {
super()
this.state = {
autoFocus1: true,
autoFocus2: false,
autoFocus3: false,
autoFocus4: false,
}
}
onTextChanged(t) { //callback for immediate state change
if (t == 2) { this.setState({ autoFocus1: false, autoFocus2: true }, () => { console.log(this.state) }) }
if (t == 3) { this.setState({ autoFocus2: false, autoFocus3: true }, () => { console.log(this.state) }) }
if (t == 4) { this.setState({ autoFocus3: false, autoFocus4: true }, () => { console.log(this.state) }) }
}
render() {
const { centerEverything, container, passcodeContainer, testShit, textInputStyle } = styles;
return (
<View style={[centerEverything, container]}>
<View style={[passcodeContainer]}>
<PasscodeTextInput
autoFocus={this.state.autoFocus1}
onChangeText={() => this.onTextChanged(2)} />
<PasscodeTextInput
autoFocus={this.state.autoFocus2}
onChangeText={() => this.onTextChanged(3)} />
<PasscodeTextInput
autoFocus={this.state.autoFocus3}
onChangeText={() => this.onTextChanged(4)} />
<PasscodeTextInput
autoFocus={this.state.autoFocus4} />
</View>
</View>
);
}
}
const styles = {
centerEverything: {
justifyContent: 'center',
alignItems: 'center',
},
container: {
flex: 1,
backgroundColor: '#E7DDD3',
},
passcodeContainer: {
flexDirection: 'row',
},
}
AppRegistry.registerComponent('ProgressBar', () => ProgressBar);
TextInput 有一个 defaultProp,可以在组件安装后关注它。
自动对焦
如果为 true,则将输入集中在 componentDidMount 上,默认值为 false。 有关更多信息,请阅读相关文档。
在componentDidUpdate
之后它将无法正常工作。 在这种情况下,可以使用ref
以编程方式聚焦。
您不能使用这种方式将ref
转发给<TextInput>
,因为ref
是特殊道具之一。 因此,调用this.refs.passcode2
将返回给您<PasscodeTextInput>
。
尝试更改为以下内容以从<TextInput>
获取ref
。
密码文本输入.js
const PasscodeTextInput = ({ inputRef, ... }) => {
...
return (
<View>
<TextInput
ref={(r) => { inputRef && inputRef(r) }}
...
/>
</View>
...
);
}
然后,将来自<PasscodeTextInput>
的inputRef
分配给一个变量并使用focus()
切换焦点(从 RN 0.41.2
不推荐使用)。
索引.ios.js
return (
<PasscodeTextInput
autoFocus={true}
onChangeText={(event) => { event && this.passcode2.focus() }} />
<PasscodeTextInput
inputRef={(r) => { this.passcode2 = r }}
onChangeText={(event) => { event && this.passcode3.focus() }} />
<PasscodeTextInput
inputRef={(r) => { this.passcode3 = r }}
onChangeText={(event) => { event && this.passcode4.focus() }} />
<PasscodeTextInput
inputRef={(r) => { this.passcode4 = r }} />
);
PS: event && this.passcode2.focus()
防止在尝试清除旧密码并输入新密码时切换焦点。
我们用不同的方法处理这种风格的屏幕。
我们不是管理 4 个单独的 TextInput 并处理每个 TextInput 的焦点导航(然后在用户删除字符时再次返回),而是我们在屏幕上有一个 TextInput 但不可见(即 0px x 0px)宽,它具有焦点, maxLength 和键盘配置等
这个 TextInput 从用户那里获取输入,但实际上是看不到的,因为每个字符都是输入的,我们将输入的文本呈现为一系列简单的 View/Text 元素,其样式与上面的屏幕非常相似。
这种方法对我们来说效果很好,不需要管理“下一个”或“上一个”TextInput 旁边要关注的内容。
您可以像 Jason 所说的那样使用焦点方法onChangeText
,此外添加maxLength={1}
可以让您立即跳转到下一个输入,而无需检查添加的内容。 (刚刚注意到它已被弃用,但这仍然是我解决问题的方式,并且在 v0.36 之前应该可以正常工作,并且此链接解释了您应该如何更新已弃用的功能)。
<TextInput
ref="first"
style={styles.inputMini}
maxLength={1}
keyboardType="numeric"
returnKeyType='next'
blurOnSubmit={false}
placeholderTextColor="gray"
onChangeText={(val) => {
this.refs['second'].focus()
}}
/>
<TextInput
ref="second"
style={styles.inputMini}
maxLength={1}
keyboardType="numeric"
returnKeyType='next'
blurOnSubmit={false}
placeholderTextColor="gray"
onChangeText={(val) => {
this.refs['third'].focus()
}}
/>
...
请注意,我对 refs 的使用也已被弃用,但我只是复制了代码,因为我可以向您保证那时候是有效的(希望现在也有效)。
最后,这种实现方式的主要问题是,一旦您尝试使用退格键删除一个数字,您的焦点就会跳到下一个,从而导致严重的用户体验问题。 但是,您可以监听退格键输入并执行不同的操作,而不是专注于下一个输入。 因此,如果您选择使用此类实施,我将在此处留下一个链接供您进一步调查。
先前描述的问题的 Hacky 解决方案:如果您在执行任何操作之前检查onChangeText
prop 中输入的内容,如果值为number ,则可以跳转到下一个输入,否则(这是一个退格键),跳回。 (只是想出这个主意,我还没有尝试过。)
我认为问题在于onSubmitEditing
是当您按下常规键盘上的“返回”或“输入”键时......键盘上没有这些按钮之一。
假设您希望每个输入只有一个字符,您可以查看onChangeText
,然后检查文本的长度是否为 1,如果长度确实为 1,则调用 focus。
<TextInput
ref={input => {
this.nameOrId = input;
}}
/>
<TouchableOpacity
onPress={()=>{
this.nameOrId.focus()
}}
>
<Text>Click</Text>
</TouchableOpacity>
我用这段代码解决:const VerifyCode: React.FC = ({ pass, onFinish }) => {
const inputsRef = useRef<Input[] | null[]>([]);
const [active, setActive] = useState<number>(0);
const onKeyPress = ({ nativeEvent }:
NativeSyntheticEvent<TextInputKeyPressEventData>) => {
if (nativeEvent.key === "Backspace") {
if (active !== 0) {
inputsRef.current[active - 1]?.focus();
return setActive(active - 1);
}
} else {
inputsRef.current[active + 1]?.focus();
return setActive(active + 1);
}
return null;
};
return (
<View style={styles.container}>
<StyledInput
onKeyPress={onKeyPress}
autoFocus={active === 0}
ref={(r) => {
inputsRef.current[0] = r;
}}
/>
<StyledInput
onKeyPress={onKeyPress}
autoFocus={active === 1}
ref={(r) => {
inputsRef.current[1] = r;
}}
/>
<StyledInput
onKeyPress={onKeyPress}
autoFocus={active === 2}
ref={(r) => {
inputsRef.current[2] = r;
}}
/>
<StyledInput
onKeyPress={onKeyPress}
autoFocus={active === 3}
ref={(r) => {
inputsRef.current[3] = r;
}}
/>
</View>
);
};
export default VerifyCode;
我在所有输入中放置一个 ref,当 onKeyPress 触发时,函数验证是否必须返回或转到下一个输入
通过删除 autoFocus={true} 并设置超时来解决它。 我有一个弹出窗口作为功能组件,并使用“current.focus()”和 Refs,如下所示:
const Popup = ({ placeholder, autoFocus, showStatus, }) => { const inputRef = useRef(null); useEffect(() => {
Platform.OS === 'ios'
? inputRef.current.focus()
: setTimeout(() => inputRef.current.focus(), 40); }, [showStatus]); return (
<View style={styles.inputContainer}>
<TextInput
style={styles.inputText}
defaultValue={placeholder}
ref={inputRef}
/>
</View> };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.