我在我的应用程序中使用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,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在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制作文件时