Я сейчас использую react-navigation v5. У меня есть Tab-навигатор с 3 экранами 'Home', 'Discover', 'Profile'. Мне нужно сделать навигацию таким образом, чтобы я мог полностью представить модальный экран поверх навигатора вкладок. В документах я не нашел, как это сделать с помощью навигатора вкладок. Поэтому я хочу, чтобы вкладчик вкладок внутри стека навигатора. И теперь у меня есть тонны проблем, которые мне нужно решить:
Как мне показать заголовок для каждой вкладки в навигаторе вкладок, вложенном в стек.
Показать модальный экран из окна «Домой».
Поскольку я использую машинопись до v5, я использовал v4 с NavigationInjectedProps. Я мог получить доступ к вложенному компоненту внутри «Home» без проблем, но теперь у меня есть undefined props.navigation
MainNavigator.tsx
import HomeScreen from './Home/HomeScreen';
import DiscoverScreen from './Discover/DiscoverScreen';
import ProfileScreen from './profile/ProfileScreen';
import StreamsTabScreen from './Discover/tabview/tabScreens/StreamsTabScreen';
import { Image, Platform, View } from 'react-native';
import React from 'react';
import images from 'assets/images'
import DeviceInfo from 'react-native-device-info';
import VideoPlayer from '../../library/ui/videoPlayer/VideoPlayer';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
export type TabNavigationProp = {
Home: undefined; //
Discover: undefined; // Should be here all undefined ????
Profile: undefined; //
}
export type StacknavigationProp = {
TabNavigator: undefined; // Same here ???
ModalPlayer: undefined; //
}
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name='Home' component={HomeScreen} />
<Tab.Screen name='Discover' component={DiscoverScreen} />
<Tab.Screen name='Profile' component={ProfileScreen} />
</Tab.Navigator>
);
};
const MainStackNavigator = () => {
return (
<Stack.Navigator mode='modal'>
<Stack.Screen name='TabNavigator' component={TabNavigator} options={{ headerShown: false }} />
<Stack.Screen name='ModalPlayer' component={VideoPlayer} />
</Stack.Navigator>
);
}
export default MainStackNavigator;
HomeScreen.tsx
import { View, Text, StyleSheet, ScrollView } from "react-native";
import React from "react";
import StreamsScreen from '../../streamsScreen/StreamsScreen';
import VideoplayerScreen from '../../videoplayer/VideoplayerScreen';
import { CompositeNavigationProp } from '@react-navigation/native';
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import { StackNavigationProp } from '@react-navigation/stack';
import { TabNavigationProp, StacknavigationProp } from "../MainNavigator";
export type HomeScreenNavigationProps = CompositeNavigationProp<
BottomTabNavigationProp<TabNavigationProp, 'Home'>,
StackNavigationProp<StacknavigationProp>
>; // made props type from docs guide...
export default class HomeScreen extends React.Component<HomeScreenNavigationProps> {
render() {
console.log(this.props.navigate); //navigate is undefined...
return (
<View style={styles.container}>
<ScrollView style={styles.scrollView}>
<View style={{ paddingBottom: 24 }}>
<StreamsScreen navigate={this.props.navigation} /> //props.navigation does not exist
<View style={styles.separator} ></View>
<VideoplayerScreen />
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
scrollView: {
flex: 1,
backgroundColor: '#0C2B33',
paddingBottom: 20,
},
separator: {
height: 1,
backgroundColor: '#3D908E'
}
});
StreamsScreen.tsx
import { View, Text, StyleSheet, Image, ActivityIndicator } from 'react-native';
import MainViewItem from '../../library/ui/MainViewItem';
import { NavigationState, SceneRendererProps, TabBar, SceneMap } from 'react-native-tab-view';
import images from 'assets/images';
import { Props as IndicatorProps } from '../../library/indicator/TabBarIndicator';
import { fetchStreamsPending, fetchStreamsRefresh } from '../../redux/actions/streamActions';
import { connect } from "react-redux";
import { RootState } from "src/redux/reducers";
import numberFormatter from "../../library/utils/numberFormatter";
import palette from 'assets/palette';
import getLanguage from '../../library/utils/isoLanguages';
import {
StreamsState,
StreamsPendingState,
StreamsErrorState,
StreamsPageOffsetState,
Stream,
StreamsRefreshState
} from '../../redux/store/types';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { HomeScreenNavigationProps } from '../main/Home/HomeScreen';
interface StreamsProps {
fetchStreamsPending: typeof fetchStreamsPending;
fetchStreamsRefresh: typeof fetchStreamsRefresh;
streams: StreamsState
pending: StreamsPendingState;
error: StreamsErrorState;
pageOffset: StreamsPageOffsetState;
refresh: StreamsRefreshState;
}
type State = NavigationState<{
key: string;
}>;
type Route = {
key: string;
};
class StreamsScreen extends React.Component<StreamsProps & HomeScreenNavigationProps> { // HomeScreenNavigationProps not sure what right prop type i need here ....
...
_onPressCard = () => {
this.props.navigation.navigate('ModalPlayer'); //Property 'navigation' does not exist on type ...
this.props.navigate('ModalPlayer'); //undefined here
}
...
UPADE : я исправил проблему с навигацией, я не реализовал все логи c для навигации с машинописью ...
должен сделать что-то вроде этого:
export type TabParamList = {
Home: undefined;
Discover: undefined;
Profile: undefined;
}
export type MainStackParamList = {
TabNavigator: undefined;
Stack2Nav: undefined;
ModalPlayer: undefined;
}
export type MainStackParamList2 = {
Home: undefined;
Discover: undefined;
Profile: undefined;
}
const Tab = createBottomTabNavigator<TabParamList>();
const RootStack = createStackNavigator<MainStackParamList>();
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name='Home' component={HomeScreen} />
<Tab.Screen name='Discover' component={DiscoverScreen} />
<Tab.Screen name='Profile' component={ProfileScreen} />
</Tab.Navigator>
);
};
const MainStackNavigator = () => {
return (
<RootStack.Navigator mode='modal'>
<RootStack.Screen name='Tab' component={Tab} options={{ headerShown: false }} />
<RootStack.Screen name='ModalPlayer' component={VideoPlayer} />
</RootStack.Navigator>
);
}
в HomeScreen.tsx:
export type HomeScreenNavigationProp = CompositeNavigationProp<
BottomTabNavigationProp<TabParamList, 'Home'>,
StackNavigationProp<MainStackParamList>
>;
type Props = {
navigation: HomeScreenNavigationProp;
};
export default class HomeScreen extends React.Component<Props> {
render() {
return (
<View style={styles.container}>
<ScrollView style={styles.scrollView}>
<View style={{ paddingBottom: 24 }}>
<StreamsScreen navigation={this.props.navigation} />
<View style={styles.separator} ></View>
<VideoplayerScreen />
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
scrollView: {
flex: 1,
backgroundColor: '#0C2B33',
paddingBottom: 20,
},
separator: {
height: 1,
backgroundColor: '#3D908E'
}
});
Теперь осталась проблема модального экрана, показывающего заголовок даже после режима настройки = ' модальный в root стек навигатор, даже если я скопирую вставленный код из демо в документах. 
