Dingdong_app/components/FormInput.js

import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { View, StyleSheet } from "react-native";
import { Form, Input, Button } from "beeshell";
import Text from "./Text";
import variables from "../constants/customTheme";

const FormInput = React.memo((props) => {
    function getInputProps(props) {
        let _props = {
            value: props.value || "",
            placeholder: props.placeholder,
            placeholderTextColor: "#B4B4B4",
        };
        if (props.type == "phone") {
            _props = {
                ...props,
                dataDetectorTypes: "phoneNumber",
                maxLength: 11,
                keyboardType: "phone-pad",
            };
        } else {
            _props = {
                ..._props,
                secureTextEntry: true,
            };
        }
        if (props.onChange) {
            _props = {
                ..._props,
                onChange: (value) => props.onChange(value),
            };
        }

        if (props.type == "code") {
            _props = {
                ..._props,
                dataDetectorTypes: "phoneNumber",
                maxLength: 6,
                keyboardType: "phone-pad",
            };
        }

        return _props;
    }

    const inputProps = getInputProps(props);

    const myInput = () => {
        if (inputProps != null) {
            return;
        }
    };

    const label = (props) => {
        return (
            <View style={styles.label}>
                <Text {...props}></Text>
            </View>
        );
    };
    return (
        <Form.Item label={label(props)}>
            <View style={styles.right}>
                {props.type !== "children" && (
                    <Input {...inputProps} style={styles.input} />
                )}
                {props.children}
                {props.type === "code" && (
                    <Button
                        style={styles.code}
                        type='primary'
                        onPress={() => {
                            props.changeSend_Num(true, 60);
                            ChnageTime(60, true, props.changeSend_Num);
                        }}
                    >
                        {props.isSend
                            ? "(" + props.sendNum + ")S"
                            : "发送验证码"}
                    </Button>
                )}
            </View>
        </Form.Item>
    );
});

function ChnageTime(sendNum, isSend, changeSend_Num) {
    let num = sendNum - 1;
    console.log(num);
    changeSend_Num(true, num);
    setTimeout(() => {
        ChnageTime(num, isSend, changeSend_Num);
    }, 1000);
}

const styles = StyleSheet.create({
    input: {
        backgroundColor: "#F0F0F0",
        paddingHorizontal: 15,
        borderRadius: 3,
        marginRight: 4,
        flexShrink: 1,
        flex: 1,
    },
    label: {
        width: 90,
        marginRight: 19,
    },
    right: {
        flexDirection: "row",
    },
    code: {
        paddingHorizontal: 5,
        marginLeft: 5,
    },
});

export default FormInput;