javascript - 无法动态构建 svg 路径 react native

Question

我正在为我的应用程序构建自定义底部导航栏，但在链接 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 路径？

Answer 1

为了使其工作，必须静态地知道 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