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')}