У меня три экрана, я хочу использовать панель вкладок только для первых двух экранов. На этих двух экранах я поместил кнопку для перехода к третьему экрану. моим первым подходом был этот код:
import React from "react";
import { Platform } from "react-native";
import {
createStackNavigator,
createBottomTabNavigator,
StackViewTransitionConfigs
} from "react-navigation";
import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/HomeScreen";
import LinksScreen from "../screens/LinksScreen";
import SettingsScreen from "../screens/SettingsScreen";
const Tabs = createBottomTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
tabBarLabel: "Home",
title: "Tahiry",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === "ios"
? `ios-information-circle${focused ? "" : "-outline"}`
: "md-information-circle"
}
/>
)
})
},
Links: {
screen: LinksScreen,
navigationOptions: ({ navigation }) => ({
tabBarLabel: "Links",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === "ios" ? "ios-link" : "md-link"}
/>
)
})
}
});
export default createStackNavigator({
tabs: Tabs,
Settings: SettingsScreen
});
Он работает, но «navigationOptions» не работают, поэтому, если я устанавливаю заголовок в заголовок (он всегда отображается, даже если я устанавливаю «header: null»), он не появляется. Я попробовал другой подход со следующим кодом, но мне не удалось скрыть третий элемент вкладки:
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
const HomeStack = createStackNavigator({
Home: HomeScreen,
});
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle'
}
/>
),
};
const LinksStack = createStackNavigator({
Links: LinksScreen,
});
LinksStack.navigationOptions = {
tabBarLabel: 'Links',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
/>
),
};
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
});
SettingsStack.navigationOptions = {
tabBarLabel: 'Settings',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
/>
),
};
export default createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
});
Любые советы приветствуются.