Eu estou desenvolvendo um aplicativo em React Native e estou usando expo, eu estou tendo problemas com Stack Navigator, já revirei a documentação, não sei mais o que fazer. No App.js tenho isso:
import React from 'react';
import { View, Text, Button, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { NavigationContainer } from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import { FontAwesome, FontAwesome5 } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import AudioProvider from './App/context/AudioProvider.js'
import AudioList from './App/screens/AudioList.js';
import Player from './App/screens/Player.js';
import Download from './App/screens/Download.js'
import Playlist from './App/screens/Playlist.js';
import PlaylistDetail from './App/screens/PlaylistDetail';
const Tab = createBottomTabNavigator()
const StackPlaylist = createStackNavigator()
const PlaylistScreen = () => {
return (
<StackPlaylist.Navigator screenOptions={{headerShown: false}}>
<StackPlaylist.Screen name="Playlist" component={Playlist} />
<StackPlaylist.Screen name="PlaylistDetail" component={PlaylistDetail} />
</StackPlaylist.Navigator>
)
}
export default function App() {
return (
<AudioProvider>
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Musics" component={AudioList} options={{
tabBarIcon: () => {
return <FontAwesome name="music" size={24} color="black" />
}
}}/>
<Tab.Screen name="Player" component={Player} options={{
tabBarIcon: () => {
return <FontAwesome5 name="compact-disc" size={24} color="black" />
}
}}/>
<Tab.Screen name="Download" component={Download} options={{
tabBarIcon: () => {
return <FontAwesome name="download" size={24} color="black" />
}
}}/>
<Tab.Screen name="Playlist" component={PlaylistScreen} options={{
tabBarIcon: () => {
return <MaterialCommunityIcons name="playlist-music" size={24} color="black" />
}
}}/>
</Tab.Navigator>
</NavigationContainer>
</AudioProvider>
)
}
Meu package.json está assim:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-async-storage/async-storage": "~1.15.0",
"@react-native-community/masked-view": "0.1.10",
"@react-native-community/slider": "^3.0.3",
"@react-navigation/bottom-tabs": "^5.11.11",
"@react-navigation/native": "^5.9.6",
"@react-navigation/native-stack": "^6.0.5",
"@react-navigation/stack": "^6.0.6",
"downloadjs": "^1.4.7",
"expo": "~42.0.1",
"expo-ads-admob": "~10.1.2",
"expo-av": "~9.2.3",
"expo-media-library": "~12.1.2",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-icons": "^4.2.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-web": "~0.13.12",
"react-native-webview": "11.6.2",
"recyclerlistview": "^3.0.5"
},
"devDependencies": {
"@babel/core": "^7.9.0"
},
"private": true
}
Ele dá o seguinte erro:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method ofStackNavigator
.
import
s você colocou a extensão.js
. Talvez devesse acrescentar nesse também:import PlaylistDetail from './App/screens/PlaylistDetail'
. Esse erro pode ser porque algum desses componentes deve estar com problema na importação.