我安装 npm i @types/react-native-snap-carousel并且版本是 3.8.5 我的 package.json 是
{
"name": "olivers",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"ios": "react-native run-ios",
"android": "react-native run-android",
"test:e2e": "detox test -c ios.sim.debug",
"build:e2e": "detox build -c ios.sim.debug",
"ci:test:e2e": "detox test -c ios.sim.release -l verbose --cleanup",
"ci:build:e2e": "detox build -c ios.sim.release",
"compile": "tsc --noEmit -p . --pretty",
"format": "npm-run-all format:*",
"format:js": "prettier --write \"app/**/*.js\"",
"format:json": "prettier --write \"app/**/*.json\"",
"format:md": "prettier --write \"**/*.md\"",
"format:ts": "prettier --write \"app/**/*.ts{,x}\"",
"lint": "eslint index.js app storybook test --fix --ext .js,.ts,.tsx && yarn format",
"patch": "patch-package",
"storybook": "start-storybook -p 9001 -c ./storybook",
"test": "jest",
"adb": "adb reverse tcp:9090 tcp:9090 && adb reverse tcp:3000 tcp:3000 && adb reverse tcp:9001 tcp:9001 && adb reverse tcp:8081 tcp:8081",
"postinstall": "node ./bin/postInstall",
"build-ios": "react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios",
"build-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"clean": "react-native-clean-project",
"clean-all": "npx react-native clean-project-auto"
},
"dependencies": {
"@react-native-async-storage/async-storage": "^1.15.14",
"@react-native-community/checkbox": "^0.5.9",
"@react-native-community/masked-view": "0.1.10",
"@react-native-picker/picker": "^2.2.1",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/native": "~6.0.1",
"@react-navigation/native-stack": "^6.0.2",
"@react-navigation/stack": "~6.0.1",
"@types/react-native-snap-carousel": "^3.8.5",
"apisauce": "2.0.0",
"cors": "^2.8.5",
"expo": "^43.0.4",
"expo-linear-gradient": "^10.0.3",
"expo-localization": "11.0.0",
"i18n-js": "3.8.0",
"mobx": "6.1.8",
"mobx-react-lite": "3.2.0",
"mobx-state-tree": "5.0.1",
"react": "17.0.2",
"react-native": "0.66.3",
"react-native-bottom-action-sheet": "^2.0.2",
"react-native-bouncy-checkbox": "^2.1.7",
"react-native-gesture-handler": "^1.10.3",
"react-native-image-helper": "0.0.3",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-keychain": "6.2.0",
"react-native-paper": "^4.10.1",
"react-native-picker-select": "^8.0.4",
"react-native-push-notification": "^8.1.1",
"react-native-reanimated": "^2.2.4",
"react-native-safe-area-context": "3.1.8",
"react-native-screens": "3.8.0",
"react-native-splash-screen": "^3.3.0",
"react-native-switch-toggle": "^2.2.1",
"react-native-sync-localstorage": "^0.0.3",
"react-native-vector-icons": "^9.0.0",
"react-navigation": "^4.4.4",
"react-navigation-material-bottom-tabs": "^2.3.4",
"react-navigation-tabs": "^2.11.1",
"reactotron-mst": "3.1.3",
"reactotron-react-js": "^3.3.7",
"reactotron-react-native": "5.0.0",
"reanimated-bottom-sheet": "^1.0.0-alpha.22",
"toggle-switch-react-native": "^3.3.0",
"validate.js": "0.13.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-decorators": "7.12.1",
"@babel/plugin-proposal-optional-catch-binding": "7.12.1",
"@babel/runtime": "^7.12.5",
"@bam.tech/react-native-make": "^3.0.3",
"@storybook/addon-storyshots": "6.1.10",
"@storybook/react-native": "5.3.23",
"@storybook/react-native-server": "5.3.23",
"@types/i18n-js": "3.0.3",
"@types/jest": "26.0.19",
"@types/react": "16.14.0",
"@types/react-native": "0.63.40",
"@types/react-test-renderer": "17.0.1",
"@typescript-eslint/eslint-plugin": "4.10.0",
"@typescript-eslint/parser": "4.10.0",
"babel-jest": "26.6.3",
"babel-loader": "8.2.2",
"detox": "17.14.5",
"eslint": "^8.4.0",
"eslint-config-prettier": "7.0.0",
"eslint-config-standard": "16.0.2",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-promise": "4.2.1",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-react-native": "3.10.0",
"fbjs-scripts": "3.0.0",
"jest": "^27.4.3",
"jest-circus": "25.5.4",
"jest-expo": "^43.0.1",
"jetifier": "1.6.6",
"npm-run-all": "4.1.5",
"patch-package": "6.2.2",
"postinstall-prepare": "1.0.1",
"prettier": "2.2.1",
"react-devtools-core": "4.10.1",
"react-dom": "^17.0.2",
"react-native-clean-project": "^3.6.3",
"react-native-web": "^0.16.3",
"react-powerplug": "1.0.0",
"solidarity": "^3.0.4",
"typescript": "4.2.3"
},
"jest": {
"preset": "jest-expo",
"setupFiles": [
"<rootDir>/test/setup.ts"
],
"testPathIgnorePatterns": [
"/node_modules/",
"/e2e"
],
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|expo|expo-linear-gradient|@react-native|@react-native-async-storage|@react-navigation|@storybook|@react-native-community|expo-localization)"
]
},
"prettier": {
"printWidth": 100,
"semi": false,
"singleQuote": false,
"trailingComma": "all"
},
"detox": {
"test-runner": "jest",
"configurations": {
"ios.sim.debug": {
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/olivers.app",
"build": "xcodebuild -workspace ios/olivers.xcworkspace -scheme olivers -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -destination 'name=iPhone 11'",
"type": "ios.simulator",
"device": {
"name": "iPhone 11",
"os": "iOS 13.2"
}
},
"ios.sim.release": {
"binaryPath": "ios/build/Build/Products/Release-iphonesimulator/olivers.app",
"build": "xcodebuild -workspace ios/olivers.xcworkspace -scheme olivers -configuration Release -sdk iphonesimulator -derivedDataPath ios/build -destination 'name=iPhone 11'",
"type": "ios.simulator",
"device": {
"name": "iPhone 11",
"os": "iOS 13.2"
}
}
}
},
"eslintConfig": {
"root": true,
"parser": "@typescript-eslint/parser",
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-native/all",
"standard",
"prettier",
"prettier/@typescript-eslint"
],
"plugins": [
"@typescript-eslint",
"react",
"react-native"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"project": "./tsconfig.json"
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
},
"globals": {
"__DEV__": false,
"jasmine": false,
"beforeAll": false,
"afterAll": false,
"beforeEach": false,
"afterEach": false,
"test": false,
"expect": false,
"describe": false,
"jest": false,
"it": false
},
"rules": {
"@typescript-eslint/ban-ts-ignore": 0,
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/explicit-member-accessibility": 0,
"@typescript-eslint/explicit-module-boundary-types": 0,
"@typescript-eslint/indent": 0,
"@typescript-eslint/member-delimiter-style": 0,
"@typescript-eslint/no-empty-interface": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-object-literal-type-assertion": 0,
"@typescript-eslint/no-var-requires": 0,
"comma-dangle": 0,
"multiline-ternary": 0,
"no-undef": 0,
"no-unused-vars": 0,
"no-use-before-define": "off",
"quotes": 0,
"react-native/no-raw-text": 0,
"react/no-unescaped-entities": 0,
"react/prop-types": "off",
"space-before-function-paren": 0
}
}
}
所以我检查安装了很多次，确实删除了 node_modules 并且 npm install 了很多次
错误按摩是
error: Error: Unable to resolve module react-native-snap-carousel from /Users/jeonchangmin/Desktop/newdir/olivers/olivers/app/screens/welcome/event-banner.tsx: react-native-snap-carousel could not be found within the project or in these directories:
node_modules
../../../../node_modules
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
3 | import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native"
4 | import BottomSheet from "reanimated-bottom-sheet"
> 5 | import Carousel from "react-native-snap-carousel"
| ^
6 |
7 | const EventBannerSheet: React.FC = () => {
8 | const sheetRef = useRef(null)
at ModuleResolver.resolveDependency (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:129:15)
at DependencyGraph.resolveDependency (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/node-haste/DependencyGraph.js:288:43)
at Object.resolve (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/lib/transformHelpers.js:129:24)
at resolve (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
at /Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
at Array.reduce (<anonymous>)
at resolveDependencies (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
at processModule (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
at async addDependency (/Users/jeonchangmin/Desktop/newdir/olivers/olivers/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
at async Promise.all (index 4)
我也做了4个步骤
- 清除守望者手表：watchman watch-del-all
- 删除 node_modules 并运行 yarn install
- 重置 Metro 的缓存：yarn start --reset-cache
- 删除缓存：rm -rf /tmp/metro-*
但仍然无法正常工作.....有人帮帮我？？？
最后我的 event-banner.tsx 是
import React, { useRef, useState } from "react"
import { Dimensions } from "react-native"
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native"
import BottomSheet from "reanimated-bottom-sheet"
import Carousel from "react-native-snap-carousel"
const EventBannerSheet: React.FC = () => {
const sheetRef = useRef(null)
const carouselRef = useRef(null)
const SliderWidth = Dimensions.get("screen").width
const [activeIndex, setActivateIndex] = useState(0)
const [carouselState, setCarouselState] = useState([
{
title: "Item 1",
text: "Text 1",
},
{
title: "Item 2",
text: "Text 2",
},
{
title: "Item 3",
text: "Text 3",
},
{
title: "Item 4",
text: "Text 4",
},
{
title: "Item 5",
text: "Text 5",
},
])
const _onPressCarousel = (index: any) => {
// here handle carousel press
carouselRef.current.snapToItem(index)
}
const _renderItem = ({ item, index }) => {
return (
<TouchableOpacity
onPress={() => {
_onPressCarousel(index)
}}
style={{
backgroundColor: "white",
borderRadius: 20,
height: 300,
padding: 50,
}}
>
<Text style={{ fontSize: 30 }}>{item.title}</Text>
<Text>{item.text}</Text>
</TouchableOpacity>
)
}
const renderContent = () => (
<View style={styles.bottomSheet}>
{/* <View style={styles.sheetTextContainer}>
<Image source={require("./event.jpeg")} style={{ height: "90%", width: "90%" }} />
</View> */}
<View style={{ flex: 1, flexDirection: "row", justifyContent: "center" }}>
<Carousel
layout={"default"}
ref={carouselRef}
data={carouselState}
sliderWidth={SliderWidth}
itemWidth={300}
renderItem={_renderItem}
useScrollView
onSnapToItem={(index) => setActivateIndex(index)}
activeSlideAlignment="center"
/>
</View>
<View style={styles.sheetCloseContainer}>
<Text
style={{ color: "gray" }}
onPress={() => {
sheetRef.current.snapTo(2)
}}
>
오늘 하루 보지않기
</Text>
<TouchableOpacity onPress={() => sheetRef.current.snapTo(2)}>
<Text>닫기</Text>
</TouchableOpacity>
</View>
</View>
)
return (
<>
<BottomSheet
initialSnap={1}
ref={sheetRef}
enabledContentGestureInteraction={false}
snapPoints={[450, 350, 0]}
borderRadius={10}
renderContent={renderContent}
/>
</>
)
}
const styles = StyleSheet.create({
bottomSheet: {
backgroundColor: "white",
padding: 25,
height: 440,
},
sheetTextContainer: {
height: 270,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#d3d3d3",
borderRadius: 10,
},
sheetText: {
fontSize: 30,
color: "white",
},
sheetCloseContainer: {
flexDirection: "row",
justifyContent: "space-between",
marginTop: 20,
},
})
export default EventBannerSheet