react-native 图标不显示

Question

我是日本的网络工程师，正在学习 react-native。

我完成了 react-native 教程here

并学习创建标签here

但功能标签和搜索标签不显示...

我不知道这是为什么...

请帮帮我。

感谢您对我糟糕的英语的耐心。

这是我的代码。

【index.ios.js】

    'use strict';

    var React = require('react-native');
    var Featured = require('./Featured');
    var Search = require('./Search');

    var {
        AppRegistry,
        TabBarIOS,
        Component
       } = React;

    class Qiita_Reader extends Component {

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

      render() {
      return (
        <TabBarIOS selectedTab={this.state.selectedTab}>
          <TabBarIOS.Item
            selected={this.state.selectedTab === 'featured'}
            icon={{uri:'Featured'}}
              onPress={() => {
                this.setState({
                    selectedTab: 'featured'
                });
            }}>
           <Featured/>
           </TabBarIOS.Item>
             <TabBarIOS.Item
               selected={this.state.selectedTab === 'search'}
               icon={{uri:'search'}}
               onPress={() => {
                    this.setState({
                        selectedTab: 'search'
                    });
                }}>
                <Search/>
              </TabBarIOS.Item>
          </TabBarIOS>
        );
      }
    }

    AppRegistry.registerComponent('qiita_reader', () => Qiita_Reader);

【精选.js】

    'use strict';

    var React = require('react-native');

    var {
      StyleSheet,
      Text,
      View,
    } = React;

    var FeaturedTab = React.createClass({
      render: function() {
        return (
          <View style={styles.container}>
            <Text style={styles.description}>This is Featured Tab !!</Text>
          </View>
        );
      }
    });

    var styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      description: {
        fontSize: 15,
        backgroundColor: '#FFFFFF'
      }
    });

    module.exports = FeaturedTab;

【搜索.js】

    'use strict';

    var React = require('react-native');

    var {
      StyleSheet,
      Text,
      View,
    } = React;

    var SearchTab = React.createClass({
      render: function() {
        return (
          <View style={styles.container}>
            <Text style={styles.description}>This is SearchTab !!</Text>
          </View>
        );
      }
    });

    var styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      description: {
        fontSize: 15,
        backgroundColor: '#FFFFFF'
      }
    });

    module.exports = SearchTab;

Answer 1

您需要使用 systemIcon 而不是 icon

<TabBarIOS.Item
  selected={this.state.selectedTab === 'featured'}
  systemIcon='featured'>
</TabBarIOS.Item>
<TabBarIOS.Item
  selected={this.state.selectedTab === 'featured'}
  systemIcon='featured'>
</TabBarIOS.Item>

Answer 2

编辑：我现在看到了问题。检查docs for the TabBarIOS.Item Component. 您正在使用的 icon 属性仅适用于您上传到 XCode 的自定义图标。如果您想使用系统图标，包括用于搜索和精选的图标，您需要使用 systemIcon 属性，后跟图标的小写名称。

应该是

<TabBarIOS.Item
        selected={this.state.selectedTab === 'featured'}
        icon="featured"

和

<TabBarIOS.Item
        selected={this.state.selectedTab === 'search'}
        icon="search"

Answer 3

如果你想使用静态图片你也可以使用这个代码：

icon={require('./myimage.png')}