Dingdong_client/screens/Detail/Classification.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, FlatList } from 'react-native';
import { Div, Text } from 'react-native-magnus';
import { TouchableRipple } from 'react-native-paper';

import { useRequest } from '@umijs/hooks';

import useModel from 'flooks';
import Detail from './model';

function Item({ name, isChoose, select }) {
  return (
    <TouchableRipple onPress={select}>
      <Div py={10} px={20} bg={isChoose ? 'white' : ''}>
        <Text color={isChoose ? 'brand500' : ''}>{name}</Text>
      </Div>
    </TouchableRipple>
  );
}
export default function Classification() {
  const { id, selectClass, changeSelectClass } = useModel(Detail, [
    'id',
    'selectClass',
  ]);

  const [classifications, setclassifications] = React.useState([]);

  useRequest(
    () => {
      const params = {
        query: {
          merchantId: id,
          page: 0,
          size: 100,
        },
      };
      const urls = Object.keys(params).map((item) => {
        return `${item}=${encodeURI(JSON.stringify(params[item]))}`;
      });
      return `/classification/all?${urls.join('&')}`;
    },
    {
      refreshDeps: [id],
      onSuccess: (result) => {
        setclassifications(result.content);
        if (!result.empty) {
          changeSelectClass(result.content[0].id);
        }
      },
    }
  );
  // classification;
  return (
    <FlatList
      style={styles.left}
      data={classifications}
      renderItem={({ item }) => (
        <Item
          name={item.name}
          isChoose={selectClass === item.id}
          select={() => {
            changeSelectClass(item.id);
          }}
        />
      )}
      keyExtractor={(item) => item.id}
      extraData={selectClass}
    />
  );
}

const styles = StyleSheet.create({
  left: {
    width: 95,
    maxWidth: 95,
    paddingBottom: 100,
  },
  item: {
    paddingHorizontal: 15,
    paddingVertical: 10,
  },
});