Question

我是日本的网络工程师，我正在研究反应原生。

我完成了反应原生教程here

了解创建标签here

但是featuread标签和搜索标签没有显示...

我不知道为什么会这样......

请帮帮我。

感谢您的患者英语不好。

这是我的代码。

【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 for the TabBarIOS.Item Component.您正在使用的图标属性仅适用于您上传到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')}

反应原生图标不显示

3 个答案: