React-当我具有底部选项卡导航时，如何添加标头

Question

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

我在app.js

中有一个buttom选项卡导航

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

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

为此，请不要忘记将标题添加到堆栈导航器中，否则您最终会在屏幕上获得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

此代码将显示底部tabnavigator的每个屏幕上的标头 - mainnavigator

    const AppNavigator = createStackNavigator({ 
      Home: {screen: MainNavigator}
    },
      defaultNavigationOptions: {title: 'Instagram'},
      headerLayoutPreset: 'center'
    })
    const App = createAppContainer(AppNavigator);
    export default App;