Отображение компонентов внутри панели вкладок react-native-router-flux

Я использую response-native-router-flux для навигации в своем приложении. У меня есть навигация по вкладкам, в которую я хотел бы включить некоторые svg как tabicon. Я использую response-native-svg для работы с файлом svg.

Вот мой код маршрутизатора для моих вкладок:

import Chrono from './components/assets/Chrono'
const ChronoIcon = () => {
  return (
    <Chrono style={{width:10, height: 10}} fill="#8CCDF8"/>
  );
};
    <Scene key='root' tabs={true} tabBarPosition='top'>
                   <Scene key='chrono' hideNavBar tabBarLabel={'Something'} component={Starter} icon={ChronoIcon}/>
                   <Scene key='time' hideNavBar title='TIME' component={TimeCardList} icon={TabIcon}/>
                   <Scene key='client' hideNavBar title='CLIENT' component={ClientList} icon={TabIcon}/>
                   <Scene key='project' hideNavBar title='PROJECT' component={ProjectList} icon={TabIcon}/>
                   <Scene key='info' hideNavBar title='INFO' component={Info} icon={TabIcon}/>
                </Scene>

Как видите, я хотел бы, чтобы моя первая сцена была вкладкой, отображающей мой Chrono через функцию ChronoIcon. Вот код для Chrono Component:

import React, { Component } from 'react';
import Svg,{
    Circle,
    Ellipse,
    G,
    LinearGradient,
    RadialGradient,
    Line,
    Path,
    Polygon,
    Polyline,
    Rect,
    Symbol,
    Text,
    Use,
    Defs,
    Stop
} from 'react-native-svg';


class Chrono extends Component {
    render() {
        return (
          <Svg
              style={this.props.style}
              viewBox="0 0 75 87.5"
          >
            <Path
              fill={this.props.fill}
              d="M66.8,26.76A37.41,37.41,0,1,1,37.5,12.5a38.13,38.13,0,0,1,23.44,8.4l5.86-6.06a41.61,41.61,0,0,1,5.86,5.86ZM37.5,79.3A29.2,29.2,0,1,0,8.4,50,29.09,29.09,0,0,0,37.5,79.3ZM50,0V8.4H25V0Z"/>
            <Polyline
              fill={this.props.fill}
              points="31.9 63.35 31.9 37.35 50.1 50.35"/>
        </Svg>
        );
    }
}

export default Chrono;

Однако, похоже, ничего не работает, единственное, что отображается, - это tabBarLabel:

введите здесь описание изображения

Как я могу отобразить свой компонент svg внутри панели вкладок из response-native-router-flux?


react-native svg react-native-router-flux
person David Geismar    schedule 22.06.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел ответ.

Используйте renderTitle вот так, и когда вы можете поместить внутрь любой svg.

<Scene
   key="emaillogin"
   component={LoginEmail}
   renderTitle={() => (
       <View style={styles.headerLogoView}>
          <Logo />
       </View>
   )}
/>

const styles = {
    headerLogoView: {
    flexDirection: 'row',
    paddingLeft: 5,
    paddingTop: 5,
    width: '100%', 
    height: '100%', 
},

};

Когда создаете файл с вашим svg

person Friis1978    schedule 24.06.2018
comment
К сожалению, это работает для «обычной сцены», но я работаю со сценами с вкладками (см. В моем вопросе, что мои сцены обернуты в сцену с вкладками) - person David Geismar; 26.06.2018
comment
Хорошо, извини, что не видел. - person Friis1978; 27.06.2018