反应原生如何用户确认字段

问题描述

大家好，这个 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',});

希望对您有所帮助，但您必须查看发布商的示例。