如何修复 React Expo 中的 Require 循环警告答案

【问题标题】：How to fix Require cycle warning In React Expo如何修复 React Expo 中的 Require 循环警告
【发布时间】：2021-07-11 16:20:31
【问题描述】：

我收到此错误。[ErrorImg][1] 这是需要循环错误，但我找不到原因。我想通过 component.js 将 ListItem 组件用于 View.js，我已经像这样使用了 import {ListItem } from '../components/';。结果很好，但是有这个警告，我想修复。请帮帮我。

需要循环：Components.js->

import Button from './Button';
import Select from './Select';
import Icon from './Icon';
import Tabs from './Tabs';
import Product from './Product';
import Drawer from './Drawer';
import Header from './Header';
import Switch from './Switch';
import ListItem from './ListItem';
import HorizontalListItem from './HorizontalListItem';
export {
    Button,
    Select,
    Icon,
    Tabs,
    Product,
    Drawer,
    Header,
    Switch,
    ListItem,
    HorizontalListItem,
};```

View.js->

```const renderPatientsList = () => {
      return(
        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <ScrollView vertical={true} showsVerticalScrollIndicator={false} style={{marginBottom: theme.SIZES.BASE * 3}}>
                <ListItem product={products[0]} horizontal />
                <ListItem product={products[1]} horizontal />
                <ListItem product={products[2]} horizontal />
            </ScrollView>    
        </Block>
      )
  }```

ListItem.js -->

```import React from 'react';
import { withNavigation } from '@react-navigation/compat';
import { StyleSheet, Dimensions, Image, TouchableWithoutFeedback } from 'react-native';
import { Block, Text, theme } from 'galio-framework';
import { Icon } from '../components/';
import { LinearGradient } from 'expo-linear-gradient';

const { width } = Dimensions.get('screen');

const ListItem = props => {
  const { navigation, product, horizontal, full, style, priceColor, imageStyle, time, unReaden, weekday } = props;
  const imageStyles = [styles.image, full ? styles.fullImage : styles.horizontalImage, imageStyle];

  return (
        
      <Block row={horizontal} card flex style={[styles.product, styles.shadow, style]}>
          <TouchableWithoutFeedback onPress={() => navigation.navigate('Product', { product: product })}>
            <Block style={[styles.imageContainer, styles.shadow]}>
              <Image source={{ uri: product.image }} style={imageStyles}/>
            </Block>
          </TouchableWithoutFeedback>
          <TouchableWithoutFeedback onPress={() => navigation.navigate('Product', { product: product })}>
            <Block flex={3}>
              <Text size={16} style={styles.userName}>{product.title}</Text>
              <Block flexDirection={'row'}>
                <Icon name="photo" family="font-awesome" color={theme.COLORS.MUTED} size={theme.SIZES.BASE} style={styles.icons}> </Icon>  
                <Icon name="check" family="font-awesome" color={theme.COLORS.MUTED} size={theme.SIZES.BASE} style={styles.icons}> </Icon>  
                <Text size={16} muted={!priceColor} color={priceColor}>${product.price}</Text>
              </Block>
            </Block>
          </TouchableWithoutFeedback>
          <TouchableWithoutFeedback onPress={() => navigation.navigate('Product', { product: product })}>
            <Block flex={1}>
              <>
                {(product.time) ? (
                  <Text size={12} style={styles.times} color={"#06D81E"}>{product.time}</Text>
                ) : (
                  <Text size={12} style={styles.times} color={"#000"}>{product.weekday}</Text>
                )}
              </>
              
              <Block style={{borderRadius: 100, backgroundColor: "#06D81E", width: theme.SIZES.BASE * 1.2, height: theme.SIZES.BASE * 1.2, position: "absolute", right: theme.SIZES.BASE, bottom: theme.SIZES.BASE}}>
                <Text size={12} center style={{justifyContent: 'center', alignItems: 'center'}} color={"#FFF"} fontWeight={"semiBold"}>{product.unReaden}</Text>
              </Block>
            </Block>
          </TouchableWithoutFeedback>
      </Block>
  );
}```


  [1]: https://i.stack.imgur.com/rDB6i.png

【问题讨论】：

标签： react-native expo

【解决方案1】：

您收到了 require 循环警告，因为您最终创建了一个循环（在 ListItem.js 中需要来自 Component.js 并在 Component.js 中来自 ListItem.js 需要）

在ListItem.js，

import {Icon} from Icon.js

一般的想法是将模块写入另一个文件并从那里导入该模块。

详细说明请参见： Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle

【讨论】：