如何将图标添加到 react-native-tab-view 中的选项卡

Question

我正在使用 react-native-tab-view，我可以在选项卡上放置文本，但我想要图标。GitHub 上有一些答案，但不清楚。如果你知道什么就完美了！

Answer 1

1.获取导入的图标库：-

import Icon from 'react-native-vector-icons/AwesomeFont'

2.使用 props 创建根据路由渲染图标的方法：-

const getTabBarIcon = (props) => {

    const {route} = props

      if (route.key === 'Search') {

       return <Icon name='search' size={30} color={'red'}/>

      } else {

       return <Icon name='circle' size={30} color={'red'}/>

      }
}

3.使用回调到 getTabBarIcon 的渲染 TabBar 道具渲染 TabView：-

export default class App extends React.Component {

    state = {
        index: 0,
        routes: [
            {key: 'Home', title: 'Hello'},
            {key: 'Search', title: 'Second'}
        ],
    }

    render() {
        return (
            <TabView
                navigationState={this.state}
                renderScene={SceneMap({
                    Home: FirstRoute,
                    Search: SearchScreen,
                })}
                onIndexChange={index => this.setState({index})}
                initialLayout={{height: 100, width: Dimensions.get('window').width}}
                renderTabBar={props =>
                    <TabBar
                        {...props}
                        indicatorStyle={{backgroundColor: 'red'}}
                        renderIcon={
                            props => getTabBarIcon(props)
                        }
                        tabStyle={styles.bubble}
                        labelStyle={styles.noLabel}
                    />
                }
                tabBarPosition={'bottom'}
            />
        );
    }
}

4.您可以使用任何样式设置 TabBar（此处隐藏标签以仅使用图标选项卡）

const styles = StyleSheet.create({
    scene: {
        flex: 1,
    },
    noLabel: {
        display: 'none',
        height: 0
    },
    bubble: {
        backgroundColor: 'lime',
        paddingHorizontal: 18,
        paddingVertical: 12,
        borderRadius: 10
    },
})

反应原生

Answer 2

您必须重写 renderHeader 方法并在 TabBar 中定义您自己的渲染标签方法：

  renderHeader = (props) => (
      <TabBar
        style={styles.tabBar}
        {...props}
        renderLabel={({ route, focused }) => (
          <View style={styles.tabBarTitleContainer}>
               /* HERE ADD IMAGE / ICON */
          </View>
        )}
        renderIndicator={this.renderIndicator}
      />
  );