Навигация в React Native 0.74
После обновления 22 апреля не получается сделать навигацию между экранами. На данный момент отображается черный экран, а должна отображаться написанная страница. Сначала я изменял код в app/(tab)/_layout.tsx, но позже вернул системный код. На данный момент код в app/(tab)/_layout.tsx выглядит так:
import { Tabs } from 'expo-router';
import React from 'react';
import { TabBarIcon } from '@/components/navigation/TabBarIcon';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
export default function TabLayout() {
const colorScheme = useColorScheme();
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
headerShown: false,
}}>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
)
}}
/>
<Tabs.Screen
name="explore"
options={{
title: 'Explore',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
),
}}
/>
</Tabs>
);
}
Сама навигация прописана в App.js, который находиться в корне.
App.js
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { PlayerScreen } from './src/screens/PlayList';
const Stack = createNativeStackNavigator();
const App = () => {
return (
<NavigationContainer independent={true} >
<Stack.Navigator>
<Stack.Screen name="Home" component={PlayerScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Также приложу файл app/(tab)/index.tsx
import { Image, StyleSheet, View, Text } from 'react-native';
import App from "../../App";
export default function PlayerScreen() {
return (
<View>
<App />
</View>
);
}