Dingdong_app/screens/RegisterScreen.js

import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import {
    Image,
    Platform,
    StyleSheet,
    TouchableOpacity,
    View,
    ImageBackground,
} from "react-native";
import scrollPage from "../decorator/scrollPage";
import { useModel } from "flooks";
import {
    Layout,
    Tab,
    TabView,
    Text,
    useTheme,
    Button,
} from "@ui-kitten/components";
import FormInput from "../components/FormInput";
import { useFocusEffect } from "@react-navigation/native";
import ScrollPage from "../components/ScrollPage";
import ConnectButton from "../components/ConnectButton";

export default function RegisterScreen({ navigation, route }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    const { setNavigation, pushRouter } = useModel("routersModel", true);

    const {
        welcom,
        register_form_1,
        register_pla_1,
        register_form_2,
        register_pla_2,
        register_form_4,
        register_pla_4,
        login_form_3,
        login_pla_3,
        login_form_2,
        login_pla_2,
        register_form_3,
        register_pla_3,
        next,
        login_btn_code_1,
    } = useModel("wordsModel");

    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["background-basic-color-1"]);
            setNavigation(navigation);
        }, [])
    );

    const [name, changeName] = React.useState("");
    const [showName, changeShowName] = React.useState("");
    const [phone, changePhone] = React.useState("");
    const [password, changePassword] = React.useState("");
    const [password2, changePassword2] = React.useState("");
    const [code, changeCode] = React.useState("");

    const canNext = React.useMemo(() => {
        if (
            name &&
            showName &&
            phone &&
            code &&
            password &&
            password == password2
        ) {
            return true;
        } else {
            return false;
        }
    }, [name, showName, phone, password, code, password2]);

    const { registerFirst } = useModel("userModel", true);

    return (
        <ScrollPage>
            <Layout style={styles.container}>
                <Image
                    source={require("../assets/images/logo_1.png")}
                    style={styles.logo}
                />
                <Image
                    source={require("../assets/images/logo_2.png")}
                    style={styles.logo2}
                />
                <Text style={styles.text} category='h6'>
                    {welcom}
                </Text>

                <Layout style={styles.form}>
                    {/* 输入商家名称 */}
                    <FormInput
                        label={register_form_1 + ":"}
                        value={name}
                        placeholder={register_pla_1}
                        onChange={changeName}
                        textAlign='right'
                    />
                    {/* 显示名称: */}
                    <FormInput
                        label={register_form_2 + ":"}
                        value={showName}
                        placeholder={register_pla_2}
                        onChange={changeShowName}
                        textAlign='right'
                    />

                    {/* 手机号 */}
                    <FormInput
                        label={register_form_4 + ":"}
                        value={phone}
                        type='phone'
                        placeholder={register_pla_4}
                        onChange={changePhone}
                        textAlign='right'
                    />

                    {/* 验证码 */}
                    <FormInput
                        label={login_form_3 + ":"}
                        value={code}
                        type='code'
                        placeholder={login_pla_3}
                        onChange={changeCode}
                        textAlign='right'
                        btnText={login_btn_code_1}
                    />

                    {/* 密码 */}
                    <FormInput
                        label={login_form_2 + ":"}
                        value={password}
                        type='password'
                        placeholder={login_pla_2}
                        onChange={changePassword}
                        textAlign='right'
                    />

                    {/* 确认密码 */}
                    <FormInput
                        label={register_form_3 + ":"}
                        value={password2}
                        type='password'
                        placeholder={register_pla_3}
                        onChange={changePassword2}
                        textAlign='right'
                    />

                    <Layout style={styles.layoutLeft} level='1'>
                        <Button
                            status='primary'
                            disabled={!canNext}
                            onPress={() =>
                                registerFirst({
                                    name,
                                    showName,
                                    phone,
                                    password,
                                })
                            }
                        >
                            {next}
                        </Button>
                    </Layout>
                </Layout>

                <ConnectButton />
            </Layout>
        </ScrollPage>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        paddingTop: 10,
        paddingBottom: 33,
    },
    tabContent: {
        backgroundColor: "#fff",
        marginTop: 20,
    },
    logo: {
        width: 100,
        height: 100,
        alignSelf: "center",
    },
    logo2: {
        width: 97,
        height: 21,
        alignSelf: "center",
        marginTop: 2,
    },
    text: {
        marginTop: 16,
    },
    layoutLeft: {
        flexDirection: "row",
        paddingVertical: 10,
        justifyContent: "center",
    },
    form: {
        paddingHorizontal: 26,
        paddingVertical: 20,
    },
});