Dingdong_app/screens/LoginScreen.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 { useAndroidBackHandler } from "react-navigation-backhandler";

export default function LoginScreen({ navigation, route }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel", true);
    const { setNavigation, pushRouter } = useModel("routersModel", true);
    const {
        welcom,
        login_tab_1,
        login_tab_2,
        login_form_1,
        login_pla_1,
        login_form_2,
        login_pla_2,
        login_form_3,
        login_pla_3,
        login_btn_sub,
        login_btn_forget,
        login_btn_rej,
        login_btn_code_1,
        login_btn_code_2,
    } = useModel("wordsModel");

    const tabs = [
        {
            value: 1,
            label: login_tab_1,
        },
        {
            value: 2,
            label: login_tab_2,
        },
    ];

    const [selectedIndex, setSelectedIndex] = React.useState(0);

    const [phone, changePhone] = React.useState("");
    const [password, changePassword] = React.useState("");
    const [code, changeCode] = React.useState("");
    const [sendNum, changeNum] = React.useState(60);
    const [isSend, changeSend] = React.useState(false);

    const canLogin = React.useMemo(() => {
        if (
            (selectedIndex == 0 && phone && password) ||
            (selectedIndex == 1 && phone && code)
        ) {
            return true;
        } else {
            return false;
        }
    }, [phone, password, code, selectedIndex]);

    const { loginByPassword, loginByCode } = useModel("userModel", true);
    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-100"]);
            setNavigation(navigation);
        }, [])
    );
    return (
        <View
            style={[
                styles.container,
                { backgroundColor: theme["color-primary-100"] },
            ]}
        >
            <View style={styles.center}>
                <Image
                    source={require("../assets/images/loginImg.png")}
                    style={styles.image}
                />

                <Image
                    source={require("../assets/images/loginLogo.png")}
                    style={styles.logo}
                />

                <View style={styles.tabContent}>
                    <TabView
                        selectedIndex={selectedIndex}
                        onSelect={(index) => setSelectedIndex(index)}
                        indicatorStyle={{ height: 0 }}
                    >
                        <Tab title={login_tab_1}>
                            <Layout style={styles.tabMain}>
                                {/* 手机号 */}
                                <FormInput
                                    label={login_form_1 + ":"}
                                    value={phone}
                                    type='phone'
                                    placeholder={login_pla_1}
                                    onChange={changePhone}
                                    textAlign='right'
                                />

                                {/* 密码 */}
                                <FormInput
                                    label={login_form_2 + ":"}
                                    value={password}
                                    type='password'
                                    placeholder={login_pla_2}
                                    onChange={changePassword}
                                    textAlign='right'
                                />
                            </Layout>
                        </Tab>
                        <Tab title={login_tab_2}>
                            <Layout style={styles.tabMain}>
                                {/* 手机号 */}
                                <FormInput
                                    label={login_form_1 + ":"}
                                    value={phone}
                                    type='phone'
                                    placeholder={login_pla_1}
                                    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}
                                />
                            </Layout>
                        </Tab>
                    </TabView>

                    {/* 注册找回密码 */}
                    <Layout style={styles.btnList} level='1'>
                        <Button appearance='ghost' status='basic' size='small'>
                            {login_btn_forget}
                        </Button>
                        <Button
                            appearance='ghost'
                            status='basic'
                            size='tiny'
                            onPress={() => pushRouter("Register")}
                        >
                            {login_btn_rej}
                        </Button>
                    </Layout>
                    {/* 登录 */}
                    <Layout style={styles.layoutLeft} level='1'>
                        <Button
                            status='primary'
                            disabled={!canLogin}
                            onPress={() => {
                                if (selectedIndex === 0) {
                                    loginByPassword(phone, password);
                                } else {
                                    loginByCode(phone, code);
                                }
                            }}
                        >
                            {login_btn_sub}
                        </Button>
                    </Layout>
                </View>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
    },
    center: {
        alignSelf: "stretch",
        marginHorizontal: 13,
        backgroundColor: "#fff",
        paddingTop: 20,
        paddingBottom: 10,
        borderRadius: 7,
    },
    tabContent: {
        backgroundColor: "#fff",
        marginTop: 20,
        paddingHorizontal: 9,
    },
    tabMain: {
        // paddingVertical: 10,
        paddingTop: 10,
        borderTopWidth: 1,
        borderColor: "#E5E5E5",
    },
    logo: {
        width: 217,
        height: 100,
        alignSelf: "center",
    },
    image: {
        width: 256,
        height: 100,
        position: "absolute",
        left: "50%",
        top: -65,
        marginLeft: -128,
    },
    tab: {
        borderBottomWidth: 1,
        borderColor: "#e5e5e5",
        marginHorizontal: 10,
    },
    tabItem: {
        paddingTop: 20,
        paddingBottom: 10,
        textAlign: "center",
        color: "#000",
        fontSize: 13,
    },
    tabItemActive: {
        paddingTop: 20,
        paddingBottom: 11,
        textAlign: "center",
        fontSize: 13,
        color: "#FFC21C",
    },
    form: {
        paddingTop: 10,
    },
    layoutLeft: {
        paddingLeft: 112,
        flexDirection: "row",
        paddingBottom: 10,
    },
    btnList: {
        flexDirection: "row",
        justifyContent: "space-between",
        paddingLeft: 100,
        marginTop: -10,
        marginBottom: 10,
    },
    btn: {
        paddingVertical: 0,
    },
    formSub: {
        alignItems: "flex-start",
    },
    primary: {
        minWidth: 112,
        paddingHorizontal: 10,
    },
});