【react-native】React Native + Ant Design 的 Tabs组件

现象：最近开发RN项目，在使用ant-design的tabs标签的时候，发现标签是可以左右滑动切换，但是无法点击标签切换。

原因：不知

解决方案： renderTabBar时设置TabBar渲染组件 goToTab切换标签

1. index.tsx

/** “tab” 页面 */
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { Tabs } from '@ant-design/react-native'
import TabBar from './tab-bar'

interface IState {
  currentNav: number
}

export class HomeScreen extends Component {
  readonly state: IState = {
    currentNav: 0
  }
  render() {
    const tabs = [
      { title: '进行中' },
      { title: '已结束' }
    ]
    return (
      
        
             true}
              {...props}
            />
          }
          onChange={(_tab, index) => {
            this.setState({ currentNav: index })
          }}
        >
          
            进行中数据
          
          
            已结束数据
          
        
      
    )
  }
}

2. tab-bar.tsx

import React, { Component } from "react"
import { View, ViewStyle, TextStyle, StyleSheet, Text, TouchableOpacity } from "react-native"

interface IProps {
  activeTab: String | number,
  goToTab: any,
  tabs: any[]
}

export default class TabBar extends Component {

  render() {
    const { tabs, activeTab, goToTab } = this.props
    return (
      
        {tabs.map((item, index) => {
          return (
            
               goToTab(index)}
              >
                {item.title}
              
            

          )
        })}
      
    )
  }
}
interface Styles {
  tabBar: ViewStyle,
  tabBarActiveText: TextStyle,
  tabBarItemText: TextStyle,
}
const styles = StyleSheet.create({
  tabBar: {
    height: 50,
    flexDirection: 'row'
  },
  tabBarActiveText: {
    height: 50,
    borderBottomWidth: 3,
    borderBottomColor: '#3356D9',
    color: '#3356D9',
    fontWeight: 'bold'
  },
  tabBarItemText: {
    fontWeight: '400',
    fontSize: 20,
    width: 70,
    height: 50,
    lineHeight: 50,
    color: '#333',
    textAlign: 'center'
  }
})

demo所用的安装包 "@ant-design/react-native": "3.1.9"

点此查看详细API