Question

我正在为我的应用程序构建自定义的bottomnavbar，并且在链接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} />;

ref：https://facebook.github.io/react-native/docs/images.html

无法动态构建SVG路径反应本机

1 个答案: