значки экспо на нижней вкладке навигатора не отображаются - PullRequest
Новая
       15

значки экспо на нижней вкладке навигатора не отображаются

0 голосов
/ 25 апреля 2020

В настоящее время я прохожу курс по реагированию на родной язык и начал реализовывать свой собственный код для стилизации. У меня проблема с иконками, которые не отображаются, и я не могу найти проблему. Я пытался реализовать значок на вкладке книжного шкафа, но он не появляется на нем, а также я не получаю сообщение об ошибке на выставке. 

import React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createAppContainer, createSwitchNavigator} from 'react-navigation';
import { View, StyleSheet } from 'react-native';
import { Text, Button, Input } from 'react-native-elements';
import {createStackNavigator} from 'react-navigation-stack';
import { Ionicons } from '@expo/vector-icons';


const switchNavigator = createSwitchNavigator({
ResolveAuth: ResolveAuthScreen,
loginFlow: createStackNavigator ({
  Signin: signin,
  Signup: signup,
}),

mainFlow: createBottomTabNavigator({
  Bookcase: bookcase,
  Explore: explore,
  Profile: profile
}, {
  tabBarOptions: {
    activeTintColor: 'red',
    inactiveTintColor: 'grey',
    showIcon: true,
  }},
    {
      Bookcase:{
        screen:bookcase,
        navigationOptions:{
          tabBarLabel:'Bookcase',
          tabBarIcon:({ tintColor })=>(
            <Ionicons name="ios-home" color={tintColor} size={2}/>
          )
        }
      }

  }
  )

});

const App = createAppContainer(switchNavigator)

export default () => {
  return (
    <AuthProvider>
      <App ref ={(navigator) => {setNavigator(navigator)}} />
    </AuthProvider>
  );
};

1 Ответ

0 голосов
/ 25 апреля 2020

Если вы используете реагирующую навигацию v5, то предпочтительным является способ реализации bottomStackNavigation. Этот код будет отображать значки и их цвет в зависимости от активного и неактивного состояния. Вы должны передать свойство options на отдельную вкладку экрана в response-navigation v5. 

const BottomNavigator = () => {
  const BottomNavigation = createBottomTabNavigator();

  return (
    <BottomNavigation.Navigator>
      <BottomNavigation.Screen
        name="Home"
        component={HomeStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <BottomNavigation.Screen
        name="Exam"
        component={ExamStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="book" color={color} size={size} />
          ),
        }}
      />
    </BottomNavigation.Navigator>
  );
};
...