Dingdong_app/screens/Guide3Screen.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,
    Card,
} 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";
import GuideHeaderBar from "../components/GuideHeaderBar";
import Textarea from "react-native-textarea";

export default function Guide1Screen({ navigation, route }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    const { httpGet } = useModel("httpModel", true);
    const { saveMerchant, guideStep, checkInfo, changeGuideStep } = useModel(
        "userModel",
        true
    );

    const {
        guide3_title1,
        guide3_title2,
        guide3_form_1,
        guide3_pla_1,
        guide3_form_2,
        guide3_pla_2,
        complete,
    } = useModel("wordsModel");
    const [aliName, changeAliName] = React.useState("");
    const [aliAccount, changeAliAccount] = React.useState("");
    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
            checkInfo({
                aliAccountEvent: changeAliAccount,
                aliNameEvent: changeAliName,
            });
        }, [])
    );

    const canNext = React.useMemo(() => {
        if (aliAccount && aliName) {
            return true;
        } else {
            return false;
        }
    }, [aliName, aliAccount]);

    return (
        <>
            <GuideHeaderBar />
            <ScrollPage>
                <Layout style={styles.container}>
                    <Card appearance='headFilled'>
                        <Text category='s1'>{guide3_title1}</Text>
                        <Text category='s1'>{guide3_title2}</Text>
                    </Card>
                    <Card appearance='formFilled'>
                        {/* 支付宝账号 */}
                        <FormInput
                            label={guide3_form_1}
                            placeholder={guide3_pla_1}
                            value={aliName}
                            onChange={changeAliName}
                            style={{ paddingVertical: 3 }}
                        />
                        {/* 支付宝账户名 */}
                        <FormInput
                            label={guide3_form_2}
                            placeholder={guide3_pla_2}
                            value={aliAccount}
                            onChange={changeAliAccount}
                            style={{ paddingVertical: 3 }}
                        />

                        <Layout style={styles.layoutLeft} level='1'>
                            <Button
                                status='primary'
                                disabled={!canNext}
                                onPress={() =>
                                    saveMerchant({ aliName, aliAccount })
                                }
                            >
                                {complete}
                            </Button>
                        </Layout>
                    </Card>
                    <ConnectButton />
                </Layout>
            </ScrollPage>
        </>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingBottom: 33,
    },
    tabContent: {
        backgroundColor: "#fff",
        marginTop: 20,
    },
    img: {
        width: 100,
        height: 100,
        alignSelf: "center",
    },
    img2: {
        width: 97,
        height: 21,
        alignSelf: "center",
        marginTop: 2,
    },
    text: {
        marginTop: 16,
    },
    layoutLeft: {
        // flexDirection: "row",
        paddingVertical: 10,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 50,
    },
    form: {
        paddingHorizontal: 26,
        paddingVertical: 20,
    },
    textareaContainer: {
        backgroundColor: "#F0F0F0",
        height: 100,
        borderRadius: 4,
    },
    textarea: {
        textAlignVertical: "top", // hack android
        fontSize: 13,
        color: "#333",
        paddingHorizontal: 14,
        paddingVertical: 10,
        height: 100,
    },
});