React native 如何修复React Expo中的Require循环警告
我收到了这个错误。[ErrorImg][1] 这是一个错误,但我找不到原因。 我想通过component.js使用ListItem组件来查看.js,我已经从“../components/”导入了{ListItem}”。 结果是好的,但有这个警告,我想修复。请帮帮我 需要周期:Components.js->React native 如何修复React Expo中的Require循环警告,react-native,expo,React Native,Expo,我收到了这个错误。[ErrorImg][1] 这是一个错误,但我找不到原因。 我想通过component.js使用ListItem组件来查看.js,我已经从“../components/”导入了{ListItem}”。 结果是好的,但有这个警告,我想修复。请帮帮我 需要周期:Components.js-> import Button from './Button'; import Select from './Select'; import Icon from './Icon'; import
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
从“/Button”导入按钮;
从“./Select”导入选择;
从“./Icon”导入图标;
从“./Tabs”导入选项卡;
从“./产品”导入产品;
从“./Drawer”导入抽屉;
从“./头”导入头;
从“./Switch”导入开关;
从“./ListItem”导入ListItem;
从“/HorizontalListItem”导入HorizontalListItem;
出口{
按钮
选择,
偶像
标签,
产品,,
抽屉,
标题,
转换
列表项,
水平仪,
};```
View.js->
```const renderPatientsList=()=>{
返回(
)
}```
ListItem.js-->
```从“React”导入React;
从'@react-navigation/compat'导入{withNavigation};
从“react native”导入{样式表、维度、图像、可触摸且无反馈};
从“galio框架”导入{块、文本、主题};
从“../components/”导入{Icon};
从“expo linear gradient”导入{LinearGradient};
const{width}=Dimensions.get('screen');
const ListItem=props=>{
const{导航、产品、水平、完整、样式、价格颜色、图像样式、时间、未读、工作日}=道具;
常量imageStyles=[styles.image,full?styles.fullImage:styles.horizontalImage,imageStyle];
返回(
navigation.navigate('Product',{Product:Product})}>
navigation.navigate('Product',{Product:Product})}>
{product.title}
${product.price}
navigation.navigate('Product',{Product:Product})}>
{(产品时间)(
{product.time}
) : (
{product.weekday}
)}
{product.unReaden}
);
}```
[1]: https://i.stack.imgur.com/rDB6i.png
您得到了require循环,因为您最终创建了一个循环(require fromComponent.js
中的ListItem.js
和require fromListItem.js
中的Component.js
)
在ListItem.js
中
import {Icon} from Icon.js
有关详细说明,请参见以下内容: