React Native + antd-mobile：Icon不显示与Tab.Item onPress失效问题咨询

嘿，我来帮你搞定这两个问题，结合你用的Expo 26、React 16.3和antd-mobile 2.1.8环境，咱们逐个分析：

问题一：Icon组件无法正常工作 #

你写的icon={ <Icon type='home' /> }没效果，大概率是这两个原因之一：

1. 导入方式不正确 #

在antd-mobile 2.x的React Native版本中，Icon组件需要单独导入，不能直接从主包引入。你需要把导入代码改成这样：

import Icon from 'antd-mobile/lib/icon';

而不是import { Icon } from 'antd-mobile'——后者在这个版本里没法正确加载Icon的字体资源。

2. 缺少字体文件加载 #

antd-mobile的Icon依赖自定义字体，在Expo环境下，你得在项目入口（比如App.js）里提前加载对应的字体文件：

import { Font } from 'expo';

export default class App extends Component {
  state = {
    fontsLoaded: false,
  };

  async componentDidMount() {
    await Font.loadAsync({
      'anticon': require('antd-mobile/fonts/anticon.ttf'),
    });
    this.setState({ fontsLoaded: true });
  }

  render() {
    if (!this.state.fontsLoaded) {
      return null; // 或者写个简单的加载中组件也行
    }
    return <YourMainComponent />;
  }
}

等字体加载完成后，type='home'的Icon就能正常显示了。

问题二：Tab.Item的onPress事件无响应 #

你的代码onPress={ () => this.onChangeTab.bind(this, 'category') }踩了个小坑：箭头函数里只是返回了bind后的函数，但并没有调用它。也就是说，点击的时候只会执行箭头函数、返回一个新函数，根本没触发onChangeTab。

你可以改成这两种写法：

写法一：直接在箭头函数里调用方法（推荐） #

利用箭头函数自动绑定this的特性，直接调用onChangeTab并传参：

onPress={() => this.onChangeTab('category')}

写法二：提前在constructor里绑定方法 #

如果担心重复创建函数影响性能，可以在组件的constructor里提前绑定好方法：

constructor(props) {
  super(props);
  this.handleCategoryTabPress = this.onChangeTab.bind(this, 'category');
}

// 然后在Tab.Item里这样写
onPress={this.handleCategoryTabPress}

这样每次渲染都复用同一个函数，性能会更优。

试试这两个方案，应该能顺利解决你的问题啦！

内容的提问来源于stack exchange，提问作者Herman