Dingdong_app/screens/StoreAudit.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 NavHeaderBar from "../components/NavHeaderBar";
import GoodsCard from "../components/GoodsCard";

export default function StoreAudit({ navigation, route }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    const { status, changeGuideStep } = useModel("userModel");

    const {
        storeAudio,
        storeAudioText1,
        storeAudioText2,
        storeAudioText3,
        storeAudioText4,
        complete,
    } = useModel("wordsModel");
    const [categoryList, changeCategoryList] = React.useState([]);
    const [merchantNatureList, changeMerchantNatureList] = React.useState([]);
    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
        }, [])
    );


    return (
        <>
            <NavHeaderBar title={storeAudio} back={false} />
            <ScrollPage>
                <Layout style={styles.container}>
                    {status == "PENDING" ? (
                        <>
                            <Image
                                source={require("../assets/images/shenhe.png")}
                                style={styles.icon}
                            />
                            <Text
                                category='h6'
                                status='info'
                                style={styles.text}
                            >
                                {storeAudioText1}
                            </Text>
                            <Text
                                category='h6'
                                status='info'
                                style={styles.text}
                            >
                                {storeAudioText2}
                            </Text>
                        </>
                    ) : (
                        <>
                            <Image
                                source={require("../assets/images/shehe1.png")}
                                style={styles.icon}
                            />
                            <Text
                                category='h6'
                                status='primary'
                                style={styles.text}
                            >
                                {storeAudioText3}
                            </Text>
                            <Text
                                category='h6'
                                status='primary'
                                style={styles.text}
                            >
                                {storeAudioText4}
                            </Text>
                            <Button
                                style={styles.button}
                                onPress={() => changeGuideStep("finish")}
                            >
                                {complete}
                            </Button>
                        </>
                    )}
                </Layout>
            </ScrollPage>
        </>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingBottom: 33,
        paddingVertical: 40,
        alignItems: "center",
    },
    icon: {
        width: 90,
        height: 80,
        marginBottom: 26,
    },
    text: {
        fontWeight: "500",
        marginBottom: 7,
    },
    button: {
        marginTop: 19,
    },
});