reactjs - React - 当我有底部标签导航时如何添加标题

Question

我正在尝试实现类似 Instagram 的导航

我在 App.js 中有一个按钮选项卡导航

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { createAppContainer, createBottomTabNavigator} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

import Home from './views/Home'
import Search from './views/Search'

const MainNavigator = createBottomTabNavigator({
  Home: { screen: Home },
  Search: { screen: Search },
}, {
    defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, horizontal, tintColor }) => {
            const { routeName } = navigation.state;
            let IconComponent = Ionicons;
            let iconName;

            if(routeName === 'Home'){
                iconName = `ios-home`;
            }

            if(routeName === 'Search'){
                iconName = `ios-search`;
            }

            return <IconComponent name={iconName} size={25} color={tintColor} />;
        }
    }),
    initialRouteName: 'Search',
    tabBarOptions: {
      activeTintColor: '#fff',
      activeBackgroundColor: '#4c399c',
      inactiveTintColor: '#f1f3f5',
      inactiveBackgroundColor: '#5442a0',
      showLabel: false
    },
});

const App = createAppContainer(MainNavigator);

export default App;

我将在底部有两个以上的视图。顶部栏在所有视图上都有一个居中的徽标，并且一些视图将有 1 个左按钮和/或 1 个右按钮。

我想要实现的是不在每个视图中呈现标题栏，而是在全局声明一个（如底部导航）并在将拥有它们的少数视图上添加自定义按钮

标签： reactjsreact-nativereact-navigationreact-native-ios

Answer 1

此代码将在您的 BottomTabNavigator - MainNavigator 的每个屏幕上显示居中的标题

    const AppNavigator = createStackNavigator({ 
      Home: {screen: MainNavigator}
    },
      defaultNavigationOptions: {title: 'Instagram'},
      headerLayoutPreset: 'center'
    })

    const App = createAppContainer(AppNavigator);

    export default App;