ios - 如何在 React Native 中使用本 map 片？

Question

如 this Tutorial 中所述，将本地存储的图像添加到 TabItem(或任何组件)会很容易:

1. 将XCode中的图片添加到images.xcassets
2. 像这样要求它“icon={require('image!pencil')}”(图像的名称是“pencil”)

然后我得到的是 iOS 模拟器中的异常，其中包含以下文本:

Requiring unknown module "image!pencil". If you are sure the module is there, try restarting the packager

这里有什么问题？教程？还是 React Native 改变完成了？

代码:

class devdactic_tabs extends Component {

constructor(props) {
    super(props);
    this.state = {
        selectedTab: 'welcome'
    };
}

render() {
    return (
        <TabBarIOS selectedTab={this.state.selectedTab}>
            <TabBarIOS.Item
                selected={this.state.selectedTab === 'welcome'}
                icon={require('image!pencil')}
                onPress={() => {
          this.setState({
              selectedTab: 'welcome',
          });
      }}>
                <Welcome/>
            </TabBarIOS.Item>
            <TabBarIOS.Item
                selected={this.state.selectedTab === 'more'}
                systemIcon="contacts"
                onPress={() => {
            this.setState({
                selectedTab: 'more',
            });
      }}>
                <More/>
            </TabBarIOS.Item>
        </TabBarIOS>
    );
}

Answer 1

文件名必须与 images.xcassets 中的资源名称完全相同。

例如，当您添加一个名为“foobar”的新图片集时，分配给该图片集的所有图片都必须命名为“foobar.png”。如果您正在使用例如Glyphishpro-Images，图像文件以数字为前缀。如果您随后将这些图像重命名为不带该编号的名称，您将收到此错误!

我最近几天遇到了这个问题......你也是吗？