在tabbar中显示组件react-native-router-flux

发布时间：2020-12-15 16:15:27 所属栏目：百科来源：网络整理

导读：我在我的应用程序中使用react-native-router-flux进行导航.我有标签导航,我想在其中包含一些svg作为tabicon.我使用react-native-svg来处理svg文件. 这是我的标签的路由器代码： import Chrono from './components/assets/Chrono'const ChronoIcon = () = { r

我在我的应用程序中使用react-native-router-flux进行导航.我有标签导航,我想在其中包含一些svg作为tabicon.我使用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,1,37.5,12.5a38.13,38.13,23.44,8.4l5.86-6.06a41.61,41.61,5.86,5.86ZM37.5,79.3A29.2,29.2,8.4,50,29.09,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：

enter image description here

如何从react-native-router-flux在tabbar中显示我的svg组件？

解决方法

我找到了答案.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!