【react-native】React Native + Componente de pestañas de Ant Design

Fenómeno: al desarrollar el proyecto RN recientemente, al usar las pestañas de ant-design, descubrí que las pestañas se pueden cambiar deslizando el dedo hacia la izquierda y hacia la derecha, pero las pestañas no se pueden cambiar haciendo clic.

Razón desconocida

Solución: establezca el componente de representación de TabBar goToTab para cambiar de pestaña al representarTabBar

1. índice.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<any, IState> {
  readonly state: IState = {
    currentNav: 0
  }
  render() {
    const tabs = [
      { title: '进行中' },
      { title: '已结束' }
    ]
    return (
      <View style={
   
   { flex: 1 }}>
        <Tabs
          tabs={tabs}
          renderTabBar={(props) =>
            <TabBar
              goToTab={(index) => true}
              {...props}
            />
          }
          onChange={(_tab, index) => {
            this.setState({ currentNav: index })
          }}
        >
          <View>
            <Text>进行中数据</Text>
          </View>
          <View>
            <Text>已结束数据</Text>
          </View>
        </Tabs>
      </View>
    )
  }
}

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<IProps, any> {

  render() {
    const { tabs, activeTab, goToTab } = this.props
    return (
      <View style={styles.tabBar}>
        {tabs.map((item, index) => {
          return (
            <View style={
   
   { flex: 1, alignItems: 'center' }} key={index}>
              <TouchableOpacity
                key={index}
                onPress={() => goToTab(index)}
              >
                <Text style={[styles.tabBarItemText, activeTab === index ? styles.tabBarActiveText : null]}>{item.title}</Text>
              </TouchableOpacity>
            </View>

          )
        })}
      </View>
    )
  }
}
interface Styles {
  tabBar: ViewStyle,
  tabBarActiveText: TextStyle,
  tabBarItemText: TextStyle,
}
const styles = StyleSheet.create<Styles>({
  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'
  }
})

Haga clic aquí para ver la API detallada