ReactNative Antd-Mobile OnPress и значок не работает

У меня есть два вопроса относительно кода ниже: проект ReactNative и использует antd-mobile для компонента пользовательского интерфейса.

ReactNative:

"dependencies": {
"expo": "^26.0.0",
"react": "16.3.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz",
"antd-mobile": "^2.1.8" }
  1. Иконка не работает icon={ <Icon type='home' /> }
  2. Tab.Item OnPress не работает onPress={ () => this.onChangeTab.bind(this, 'category') }

С терминала expo каждый раз, когда я нажимаю на tab.item, он не регистрирует его.

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { TabBar, Icon } from 'antd-mobile'

export class TabBarNav extends Component<any, any> {
    constructor(props) {
        super(props)

        this.state = {
            selectedTab: 'home'
        }

        console.log('selectedTab: ' + this.state.selectedTab)
    }

    renderContent(pageText: any) {
        return (
          <View style={{ flex: 1, alignItems: 'center', backgroundColor: 'white' }}>
            <Text style={{ margin: 50 }}>{pageText}</Text>
          </View>
        )
    }
    onChangeTab(tab) {
        console.log('Selected Tab: ' + tab)
        this.setState({
            selectedTab: tab
        })
    }

    render() {
        return (
            <View>
                <TabBar unselectedTintColor='#949494'
                        tintColor='#33A3F4'
                        barTintColor='#ccc'
                >
                    <TabBar.Item title='Home'
                                 key='home'
                                 selected={ this.state.selectedTab === 'home' }
                                 onPress={ () => this.onChangeTab.bind(this, 'home') } // This is not working
                                 icon={ <Icon type='home' /> } // This is not working
                    >
                        { this.renderContent('home') }
                    </TabBar.Item>
                    <TabBar.Item title='Category'
                                 key='category'
                                 selected={ this.state.selectedTab === 'category' }
                                 onPress={ () => this.onChangeTab.bind(this, 'category') }
                                 icon={ require('../../../artifacts/images/category.png')} // This is working
                    >
                        { this.renderContent('category') }
                    </TabBar.Item>
                </TabBar>
            </View>
        )
    }
}

1 ответ

Из онлайн-примеров ясно, что имена значков не используются в RN, вместо них используются строки юникода для неосновных значков.

Попробуйте

Надеюсь, что это работает!

Другие вопросы по тегам