Question

我不明白为什么我的IconTab组件没有被使用。只显示文字。

我的包装：

＆＃34; native-base＆＃34;：＆＃34; ^ 2.4.1＆＃34;，
＆＃34;反应＆＃34;：＆＃34; 16.3.0-alpha.1＆＃34;，＆＃34; react-native＆＃34;：
＆＃34; https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz＆＃34;，
＆＃34; react-native-router-flux＆＃34;：＆＃34; ^ 4.0.0-beta.28＆＃34;，

我的代码：

class TabIcon extends React.Component {
  render() {
    const color = `#${Math.floor(Math.random()* 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}`
    return (
      <View style={{backgroundColor: color, width: '100%', height: '100%', justifyContent: 'center'}}>
        <Text style={{color: this.props.selected ? 'pink' :'white', textAlign: 'center', fontSize :20}}>{this.props.title}</Text>
      </View>
    );
  }
}

export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };

  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else { 
      return (
      <Router hideNavBar={true}>
        <Scene key="root" hideNavBar={true}>

          {/* Tab Container */}
          <Scene key="tabbar" tabs={true} tabBarStyle={style.tabBarStyle} hideNavBar={true}>
              <Scene key="LiveTracker" component={LiveTracker} title="Live trackeur" hideNavBar={true} icon={TabIcon} initial={true}  />
              <Scene key="BillGenerator" component={BillGenerator} title="Factures" hideNavBar={true} icon={TabIcon}  />

          </Scene>
        </Scene>
      </Router>
      );
    }
  }

感谢您的帮助

Answer 1

您需要在Icon Name中提供Tab Scene才能显示图标

<强> App.js

import Icon from 'react-native-vector-icons/FontAwesome';

 <Scene key="LiveTracker" iconName="tags" component={LiveTracker} title="Live trackeur" hideNavBar={true} icon={TabIcon} initial={true}  />
 <Scene key="BillGenerator" iconName="newspaper-o" component={BillGenerator} title="Factures" hideNavBar={true} icon={TabIcon}  />

并将其传递给您的TabIcon component，如下所示

<强> TabIcon.js

<View style={{backgroundColor: color, width: '100%', height: '100%', justifyContent: 'center'}}>
        <Icon style={{color: color}} name={this.props.iconName || "circle"} size={18}/>
        <Text style={{color: this.props.selected ? 'pink' :'white', textAlign: 'center', fontSize :20}}>{this.props.title}</Text>
      </View>

检查展示位置react-native-vector-icons

TabIcon没有反作用

1 个答案: