react-native - 反应原生如何用户确认字段
解决方案
我只是把我的工作代码发给你:
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',
textAlign: 'center',
},
focusCell: {
borderColor: '#000',
},
});
希望对您有所帮助,但您必须查看发布者的示例。
推荐阅读
- python - 修复错误
' 需要字符串作为左操作数,而不是元组 - java - 在无需访问源代码的情况下模拟 Swing 应用程序中的用户操作(例如:鼠标单击)
- android - 无法使用 google API dot net 客户端设置 APK 元数据
- html - 如何使我的内容显示在图像的右侧而不是图像下方?
- c# - 查找与所有其他项目相关的项目
- r - 如何根据列的范围(即<15,15-30等...)创建因子变量
- php - 多个 elseif 语句的问题
- python - pyodbc connection.close() 使用 Access 数据库非常慢
- parameters - Verilog - 在生成块中增加本地参数
- java - 在 Eclipse 上按“运行”时无法(同时)启动游戏和音乐