react原生图标不显示

Question

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

我在这里完成了react-native教程

学习在这里创建制表符

但是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);

【feature .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而不是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

编辑:我现在看到问题了。查看tabbaros的文档。项目组件。你正在使用的icon属性只用于你上传到XCode的自定义图标。如果您想使用系统图标，包括搜索和特色图标，您需要使用systemIcon prop，后面跟着图标的小写名称。

应该是

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

和

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

Answer 3

如果您想使用静态图像，您也可以使用以下代码:

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