react-native图标不显示

Question

我是日本的网络工程师，并且正在研究本机。

我在这里完成了本机教程

并在此处了解“创建”标签

但是Featuread标签和search标签没有显示...

我不知道为什么

请帮我。

谢谢您对我英语不好的耐心。

这是我的代码。

【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);

【Featured.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;

【Search.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而不是图标

<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中的TabBarIOS.Item组件。 您使用的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')}