Иконки не загружаются в панель вкладок сцены / стека - PullRequest
Новая
       7

Иконки не загружаются в панель вкладок сцены / стека

0 голосов
/ 27 апреля 2018

Я пытаюсь настроить панель вкладок со значками, но мой экран отображает только текст сцены без значков:

enter image description here

Чтобы упростить задачу, я создал функцию, которая принимает реквизиты имени иконки и выводит элемент Icon с именем TabIcon, но эта функция не запускается. Я проверил это, поместив предупреждение в функцию. Я удалил большинство сцен и оставил только submit, чтобы упростить код, он находится внизу кода. Вот мой router.js: 

import React from 'react';
import { Scene, Router, ActionConst, Stack, Modal, Tabs } from 'react-native-router-flux';
import { View, Text, Icon } from 'react-native-elements';
//Splash Component
import Splash from '../components/Splash/Splash';

//Authentication Scenes
//removed import screens to simplify

import { StackNavigator } from 'react-navigation';

//Import Store, actions
import store from '../redux/store'
import { checkLoginStatus } from "../modules/auth/actions";

import { color, navTitleStyle } from "../styles/theme";

function TabIcon(props) {
    return (
      <View style={styles.container}>
        <Icon
          color={props.tintColor}
          name={props.iconName}
          size={26}
          />
      </View>
    )
  }

  const styles = {
    container: {
      width: 48,
      height: 42,
      padding: 5,
      justifyContent: 'center',
      alignItems: 'center',
    }
  };

export default class extends React.Component {
    constructor() {
        super();
        this.state = {
            isReady: false,
            isLoggedIn: false
        }
    }

    componentDidMount() {
        let _this = this;
        store.dispatch(checkLoginStatus((isLoggedIn) => {
            _this.setState({isReady: true, isLoggedIn});
        }));
    }

    render() {
        if (!this.state.isReady)
            return <Splash/>

        return (
            <Router>
                <Scene key="root" hideNavBar
                        navigationBarStyle={{backgroundColor: "#fff"}}
                        titleStyle={navTitleStyle}
                        backButtonTintColor={color.black}
                >
                    <Stack key="Main" tabs={true} initial={this.state.isLoggedIn}>
                        //here's the scene that uses the TabIcon function//////////////////
                        <Scene key="Submit" component={Submit} title="Submit" icon={TabIcon} iconName='timer' />
                    </Stack>
                </Scene>
            </Router>
        )
    }
}

Ответы [ 2 ]

0 голосов
/ 28 мая 2019

В моем решении это сработало: если Icon={myIcon} не работает, попробуйте tabBarLabel={myIcon} 

                <Scene key="tabs" hideNavBar tabs={true} 
                tabBarStyle={}>
                    <Scene key="roomTab" tabBarLabel={roomIcon} >
                        <Scene 
                            key="rooms"
                            hideNavBar
                            component={Rooms}
                            initial={true}
                        />
                    </Scene>
0 голосов
/ 29 июня 2018

попробуйте поставить стиль, подобный следующему, со мной произошло то же самое, и добавление было исправлено 

style={{height:26, width:26}}

в этой части 

<View style={styles.container}>
    <Icon
      color={props.tintColor}
      name={props.iconName}
      size={26}
      />
  </View>

так ... 

<View style={styles.container}>
    <Icon
      style={{height:26, width:26}}
      color={props.tintColor}
      name={props.iconName}
      size={26}
      />
  </View>
...