如何解决反应原生如何用户确认字段
大家好,这个 package 和这个 snack 说它易于使用,但我不能使用它。我把它称为零食一样的组件。 然后它显示确认字段并获取值,但我如何做出反应或获取这些值。谢谢。
解决方法
我只是向您发送我的工作代码:
import React,{useState,useCallback,useEffect,useRef} from 'react';
import {
CodeField,Cursor,useBlurOnFulfill,useClearByFocusCell,} from 'react-native-confirmation-code-field';
import Toast from 'react-native-root-toast';
import {View,Text,ActivityIndicator,StyleSheet} from 'react-native';
import axios from 'axios';
import {authURI} from '../../config.json';
import styles from '../../styles';
import AsyncStorage from '@react-native-community/async-storage';
import SmsRetriever from 'react-native-sms-retriever';
import {AuthContext} from '../../contexts';
export default ({navigation,route}) => {
// let codeContainer = useRef(null);
let [loading,load] = useState(false);
const [value,setValue] = useState('');
const codeContainer = useBlurOnFulfill({value,cellCount: 5});
const [props,getCellOnLayoutHandler] = useClearByFocusCell({
value,setValue,});
let {signIn} = React.useContext(AuthContext);
useEffect(() => {
value.length === 5 && handlerOnFulfill(value);
},[handlerOnFulfill,value]);
const handlerOnFulfill = useCallback(
async (verificationCode) => {
if (loading) {
return;
}
load(true);
let mobilePhone = route.params?.mobilePhone || '';
// console.warn(mobilePhone);
try {
let response = await axios.post(`${authURI}/user/verify`,{
mobilePhone,verificationCode,});
await AsyncStorage.setItem(
'@myabb/tokens',JSON.stringify(response.data),);
load(false);
return signIn(response.data);
} catch (error) {
let messages;
if (error && error.response.data && error.response.data.messages) {
messages = error.response.data.messages.map((message,index) => (
<Text key={index}>{message}</Text>
));
}
load(false);
Toast.show(messages ? messages : 'Network error.',{
backgroundColor: 'red',shadow: true,animation: true,duration: 5000,position: Toast.positions.CENTER,});
}
},// eslint-disable-next-line react-hooks/exhaustive-deps
[loading,route.params],);
useEffect(() => {
SmsRetriever.startSmsRetriever().then((r) => {
SmsRetriever.addSmsListener((event) => {
event.message && setValue(event.message.match(/\d+/g)[0]);
});
});
return function cleanup() {
SmsRetriever.removeSmsListener();
};
},[]);
return (
<View style={styles.container}>
<Text style={{...styles.Text,textAlign: 'center',fontSize: 17}}>
Confirmation code sent to your mobile phone.
</Text>
<CodeField
ref={codeContainer}
{...props}
value={value}
onChangeText={setValue}
cellCount={5}
rootStyle={cstyles.codeFiledRoot}
keyboardType="number-pad"
renderCell={({index,symbol,isFocused}) => (
<Text
key={index}
style={[cstyles.cell,isFocused && cstyles.focusCell]}
onLayout={getCellOnLayoutHandler(index)}>
{symbol || (isFocused ? <Cursor /> : null)}
</Text>
)}
/>
{!!loading && <ActivityIndicator />}
</View>
);
};
const cstyles = StyleSheet.create({
root: {flex: 1,padding: 20},title: {textAlign: 'center',fontSize: 30},codeFiledRoot: {marginTop: 20},cell: {
...styles.Text,width: 40,height: 40,lineHeight: 38,fontSize: 24,borderBottomWidth: 2,margin: 5,borderColor: '#00000030',},focusCell: {
borderColor: '#000',});
希望对您有所帮助,但您必须查看发布商的示例。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。