【react-native】React Native + Ant

现象：最近开发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<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'
  }
})

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

点此查看详细API