React-本机TabBarIOS.Item

Question

IOS中的TabBarIOS.Item图标总是显示以下错误

如选项卡栏图标'{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中所示