我正在为我的应用程序构建自定义底部导航栏,但在链接 svg 图标时遇到了问题。这是我的代码:
// Imports
class MainTabNavigation extends React.Component {
render() {
const navigationOptions = ['Dashboard','Status','Referrals','More'];
return(
<View style={styles.navBar}>
{
navigationOptions.map(nav => {
const lowerCaseString = nav.toLowerCase();
const svgPath = `../../assets/icons/${lowerCaseString}.svg`;
if (this.props.navigation.isFocused(nav)) {
return(
<TouchableOpacity style={[styles.tab,styles.focused]} onPress={() => {this.props.navigation.navigate(nav)}}>
<SvgUri source={require(svgPath)} />
<Text style={styles.captionStyle}>nav</Text>
</TouchableOpacity>
);
} else {
return(
<TouchableOpacity style={styles.tab} onPress={() => {this.props.navigation.navigate({nav})}}>
<SvgUri source={require(svgPath)} />
<Text style={styles.captionStyle}>{nav}</Text>
</TouchableOpacity>
);
}
})
}
</View>
);
}
}
// Styles
const NavigationConnected = withNavigation( MainTabNavigation );
export { NavigationConnected as MainTabNavigation };
而且错误信息很奇怪。错误消息说:
calls to `require` expect exactly 1 string literal argument, but this was found: `require(svgPath)`.
我无法理解的是,svgPath
字面意思是(请原谅双关语)一个字符串文字。我知道我正在连接字符串,但它仍然只是一个字符串文字。所以我的问题有两个:
1.为什么变量svgPath
不是一个字符串文字?
2.如何通过我的 map() 调用动态构建我的 svg 路径?
为了使其工作,必须静态知道 require 中的图像名称。
// GOOD
<Image source={require('./my-icon.png')} />;
// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;
// GOOD
var icon = this.props.active
? require('./my-icon-active.png')
: require('./my-icon-inactive.png');
<Image source={icon} />;
参考:https : //facebook.github.io/react-native/docs/images.html
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句