Ошибка настройки значка TabNavigator в реагирующем - PullRequest
Новая
       17

Ошибка настройки значка TabNavigator в реагирующем

0 голосов
/ 24 октября 2018

Я использую Xcode 10 & последнюю react-native версию.Я создал StackNavigator приложение с TabNavigator.

Код: navigation.js Класс 

import React from "react";
import { TabNavigator, StyleSheet, Text, View, Image} from "react-navigation";

import Dashboard from '.././Screen/Dashboard'
import Home from '.././Screen/Home'
import Events from '.././Screen/Events'
import Settings from '.././Screen/Settings'


export default Tab = TabNavigator({
  Home: {
    screen: Home,
  },
  Settings: {
    screen: Settings,
    navigationOptions: {
          tabBarLabel: 'Settings',
          tabBarIcon: ({ tintColor }) => (
            <Image source={require('.././assets/setting.png')}
            style= {{width:15, height:15, tintColor:'black'}}>
            </Image>
        )
    },
  },
  Events: {
    screen: Events,
    },
  }, {
  tabBarPosition: 'bottom',
  swipeEnabled: true,
  tabBarOptions: {
    showIcon: true,
    activeTintColor: '#f2f2f2',
    activeBackgroundColor: "#2EC4B6",
    inactiveTintColor: '#666',
    labelStyle: {
      fontSize: 16,
      padding:4,
    }
  }
});

Но я получил ошибку здесь,

[fatal][tid: com.facebook.react.ExceptionsManagerQueue] Необработанное исключение JS: инвариантное нарушение: инвариантное нарушение: инвариантное нарушение: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), нополучил: не определено.Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Проверьте метод визуализации TabBarIcon.

Еслия удаляю эту строку: 

tabBarIcon: ({ tintColor }) => (
                <Image source={require('.././assets/setting.jpeg')}
                style= {{width:15, height:15, tintColor:'black'}}>
                </Image>
            )

, тогда она работает без значка.Я искал все, но не нашел решения.

1 Ответ

0 голосов
/ 27 октября 2018

Пожалуйста, попробуйте это (при условии, что вы создали нижний навигатор, и у вас есть последняя реагирующая навигация) 

import { createBottomTabNavigator } from 'react-navigation';

export default createBottomTabNavigator({
  Home: {
    screen: Home,
  },
  Settings: {
    screen: Settings,
    navigationOptions: {
          tabBarLabel: 'Settings',
          tabBarIcon: ({ tintColor }) => (
            <Image source={require('.././assets/setting.png')}
            style= {{width:15, height:15, tintColor:'black'}}>
            </Image>
        )
    },
  },
  Events: {
    screen: Events,
    },
  }, {
  tabBarPosition: 'bottom',
  swipeEnabled: true,
  tabBarOptions: {
    showIcon: true,
    activeTintColor: '#f2f2f2',
    activeBackgroundColor: "#2EC4B6",
    inactiveTintColor: '#666',
    labelStyle: {
      fontSize: 16,
      padding:4,
    }
  }
});
...