Как получить значки, отображаемые на вкладке React Native Router Flux? - PullRequest
Новая
       46

Как получить значки, отображаемые на вкладке React Native Router Flux?

4 голосов
/ 28 июня 2019

Я создаю собственное приложение (версия 6.4.1) с использованием expo.Я использую response-native-router-flux в качестве навигатора.По какой-то причине мне не удается отобразить значок вкладки.

Вот мой код: 

// Libraries and References
import React, { Component } from 'react';
import { Router, Scene, ActionConst } from 'react-native-router-flux';
import I18n from './utils/i18n/i18n';
import { connect } from 'react-redux';
const Constants = require('./utils/constants/Constants');
import { Ionicons } from '@expo/vector-icons';
import { Icon } from 'react-native-elements';


// Components
import homeScreen from './components/screens/HomeScreen';
import alertsScreen from './components/screens/AlertAnnouncementScreen';
import resoucesScreen from './components/screens/ResourceScreen';
import settingsScreen from './components/screens/AccountSettingsScreen';


class TabIcon extends Component {
    render() {
        return (
            <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', alignSelf: 'center', justifyContent: 'center', width:30, height:30 }}>
                <Icon style={{ color: 'red' }} name='md-checkmark-circle' />
            </View>
        );
    }
};


// Navigation 
class RouterComponent extends Component {

    render() {
        return (
            <Router>
                <Scene key="root" hideNavBar>
                    <Scene key="tabHolder" tabs swipeEnabled activeBackgroundColor={Constants.BGC_GREEN} inactiveBackgroundColor={Constants.BGC_BLUE} inactiveTintColor={Constants.TAB_GREY} activeTintColor='white' type={ActionConst.RESET} >
                        <Scene key="homeTab" initial component={homeScreen} title={I18n.t('titles.home')} hideNavBar icon={TabIcon}>

                        </Scene>
                        <Scene key="alertsTab" component={alertsScreen} title={I18n.t('titles.alerts')} hideNavBar navBarButtonColor='white' icon={({ focused }) => (<Icon name='bell' type='font-awesome' size={30} color={focused ? 'white' : Constants.TAB_GREY} />)} />
                        <Scene key="resourcesTab" component={resoucesScreen} title={I18n.t('titles.resources')} hideNavBar icon={({ focused }) => (<Ionicons name='info' type='font-awesome' size={30} color={focused ? 'white' : Constants.TAB_GREY} />)} />
                        <Scene key="settingsTab" component={settingsScreen} title={I18n.t('titles.settings')} hideNavBar icon={({ focused }) => (<Icon name='gear' type='font-awesome' color={focused ? 'white' : Constants.TAB_GREY} />)} />

                    </Scene>
                </Scene>
            </Router>
        )
    }
}


//


// export
export default connect(null, null)(RouterComponent);

Однако у меня до сих пор нет вкладок.Я перепробовал все возможные аспекты CSS (поэтому они так полны), но безрезультатно.Есть какие-нибудь подсказки?

enter image description here

ОБНОВЛЕНИЕ

Я знаю, что это проблема с вкладками, потому что это работает на домашнем экране, но нена вкладках:

Вот начальный экран: 

    <View>
    <Text style={styles.welcomeText}>This is a signed in user</Text>
    <Icon name="check-circle" size ={30} />
    </View>

Вот только что обновленная логика вкладок: 

class TabIcon extends Component {
    render() {
        return (
            <Icon name="check-circle" size ={30} />
        );
    }
};

Вот снимок экрана:

enter image description here

Ответы [ 2 ]

3 голосов
/ 01 июля 2019

Я связался с GitHub для этого и наконец смог получить ответ. Здесь - ссылка.

Проблема была navigationOptions. Это перевесит все опции стиля навигации. Я удалил его из отдельных компонентов экрана, и это устранило проблему!

0 голосов
/ 29 июня 2019

Я думаю, что все ваши реквизиты имени неверны для двух компонентов Icon.Я смог получить: <Icon name="check-circle" /> для отображения и <Ionicons name="md-checkmark-circle" /> для отображения, но не <Icon name="md-checkmark-circle" /> или <Ionicons name="bell" />.

Вот список доступных для поиска значков для иониконов: https://infinitered.github.io/ionicons-version-3-search/

Если вы хотите использовать значки FontAwesome, вам необходимо: import { FontAwesome } from @expo/vector-icons';, а затем использовать компонент FontAwesome с именем prop: <FontAwesome name="bell" />

Кроме того, для значка реагировать на собственные элементы, вотсписок доступных наборов: https://react -native-training.github.io /act-native-elements / docs / icon.html # available-icon-sets

Если вы посмотрите нанабор font-awesome, вы увидите, что «gear» не вариант, но «cog» это: https://fontawesome.com/icons?d=gallery&q=gear

...