Реагировать - как добавить заголовок, когда у меня есть нижняя вкладка навигации - PullRequest
Новая
       42

Реагировать - как добавить заголовок, когда у меня есть нижняя вкладка навигации

0 голосов
/ 13 февраля 2019

Я пытаюсь получить навигацию, подобную 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 правая кнопка.

Я пытаюсь добиться того, чтобы не отображать панель заголовка в каждом представлении., но объявить одну глобально (например, нижнюю навигацию) и добавить пользовательские кнопки на несколько видов, которые будут иметь их

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

Простой способ сделать это - использовать компонент Header из act-native-elements .Вам просто нужно добавить это на экран, на котором вы хотите заголовок.Это действительно легко добавить кнопки, чтобы открыть ящик или что-нибудь еще, что вам нужно.

Чтобы это работало, не забудьте добавить заголовок : 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>
0 голосов
/ 13 февраля 2019

поместите навигацию по вкладкам в качестве родительской и добавьте навигацию по стеку внутри каждой вкладки.

...