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个右按钮。

我想要实现的是不在每个视图中渲染标题栏，而是全局声明一个（如底部导航）并在几个视图上添加自定义按钮

Answer 1

将选项卡导航作为父选项，并在每个选项卡中添加堆栈导航。

Answer 2

一种简单的方法是使用react-native-elements中的Header组件。您只需将此添加到您想要标题的屏幕上即可。将按钮添加到打开的抽屉或其他任何需要的东西中非常容易。

为此，请不要忘记将标题：null添加到堆栈导航器，否则您最终会在屏幕上显示2个标题。

示例如下：

<React.Fragment>
  <Header
    statusBarProps={{ barStyle: 'light-content' }}
    barStyle="light-content"
    leftComponent={
      <SimpleIcon
        name="menu"
        color="#34495e"
        size={20}
      />
    }
    centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
    containerStyle={{
      backgroundColor: 'white',
      justifyContent: 'space-around',
    }}
  />
</React.Fragment>

Answer 3

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

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

    const App = createAppContainer(AppNavigator);

    export default App;