React-Native TabBarIOS.Item

Question

TabBarIOS。IOS中的项目图标总是给我以下错误

类似于选项卡图标"｛uri:contacts｝"与任何已知的图像或系统图标不匹配

代码是

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  TabBarIOS,
  NavigatorIOS,
  View,
  Text,
} = React;
var myPage = React.createClass({
  render: function () {
    return (
      <View>
        <Text>Hello</Text>
        <Text>World</Text>
      </View>
    )
  }
})
var NewProject = React.createClass({
  render: function() {
    return (
       <TabBarIOS>
        <TabBarIOS.Item title="React Native" icon={{uri: 'contacts'}} selected={true}>
          <NavigatorIOS initialRoute={{ title: 'React Native', component: myPage }} />
        </TabBarIOS.Item>
        <TabBarIOS.Item title="React">
          <NavigatorIOS initialRoute={{ title: 'React Native', component: myPage }} />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }
});
AppRegistry.registerComponent('NewProject', () => NewProject);

Answer 1

我想您想使用系统图标。您应该使用systemIcon属性。

支持的系统图标包括"书签"、"联系人"、"下载"、"收藏夹"、"特色"、"历史记录"、"更多"、"最新"、"浏览次数最多"、"最近"、"搜索"、"最高评价">

在您的情况下是

    <TabBarIOS.Item title="React Native" systemIcon="contacts" selected={true}>
      <NavigatorIOS initialRoute={{ title: 'React Native', component: myPage }} />
    </TabBarIOS.Item>

图标属性用于使用导入的图像，如此链接所示https://github.com/facebook/react-native/issues/849#issuecomment-93179556