React-Native TabBarIOS.Item

Question

IOS 中的 TabBarIOS.Item 图标总是给我以下错误

like THE TAB BAR ICON '{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>

icon属性用于使用导入的图片，见此链接 https://github.com/facebook/react-native/issues/849#issuecomment-93179556