react-native - 在标签栏中显示组件 react-native-router-flux

Question

我在我的应用程序中使用 react-native-router-flux 进行导航。我有标签导航，我想在其中包含一些 svg 作为标签图标。我使用 react-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>

如您所见，我希望我的第一个场景是通过 ChronoIcon 功能显示我的 Chrono 的选项卡。这是 Chrono 组件的代码:

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:



如何在 react-native-router-flux 的标签栏中显示我的 svg 组件？

Answer 1

我找到了答案。

像这样使用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 创建文件时