Dingdong_client/screens/Address/AddressScreen.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';

import { useRequest, useCreation } from '@umijs/hooks';
import useModel from 'flooks';
import AddressModel from './model'; // detail模块通用方法

import Header from '../../components/Header';

const AddressItem = ({ info, goNext }) => {
  return (
    <Div bg="white" px={15} py={10} my={5} mx={10}>
      <Text fontSize="xl" textAlign="left">
        {info.addressName}
      </Text>
      <Div row>
        <Text fontSize="xs" color="gray300" textAlign="left">
          {info.name}
        </Text>
        <Text fontSize="xs" color="gray300" textAlign="left">
          {info.sex}
        </Text>
        <Text ml={15} fontSize="xs" color="gray300" textAlign="left">
          {info.phone}
        </Text>
      </Div>
      <Div row justifyContent="flex-end">
        {info.isDefault && (
          <Button fontSize="xs" bg="brand500">
            默认
          </Button>
        )}
        <Button
          fontSize="xs"
          ml={15}
          bg="white"
          color="gray600"
          borderColor="gray300"
          borderWidth={1}
          onPress={goNext}
        >
          编辑
        </Button>
      </Div>
    </Div>
  );
};

export default function AddressScreen({ navigation }) {
  const { addressList, getAddressList } = useModel(AddressModel, [
    'addressList',
  ]);
  const addressRequest = useRequest(getAddressList);

  return (
    <>
      <Header title="地址列表" />
      <ScrollView>
        {addressList.map((item) => {
          return (
            <AddressItem
              key={item.id}
              info={item}
              goNext={() => {
                navigation.navigate('EditAddress', {
                  id: item.id,
                });
              }}
            />
          );
        })}
      </ScrollView>

      <Button
        block
        my={20}
        mx={15}
        bg="brand500"
        onPress={() => {
          navigation.navigate('EditAddress');
        }}
      >
        新增地址
      </Button>
    </>
  );
}