react-native - 反应本机可折叠选项卡视图标签样式不起作用

Question

我正在尝试设置选项卡名称的样式但不工作。道具 labelStyle 不作为道具存在，但在文档中它存在。

import React, { memo, useMemo, useCallback, useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Dimensions, ScrollView } from 'react-native';
import { RecyclerListView, LayoutProvider, DataProvider } from 'recyclerlistview';
import Header from './Header';
import PropTypes from 'prop-types';
import faker from 'faker';
import { datas } from '../../utils';
import { Tabs } from 'react-native-collapsible-tab-view';

const HEIGHT = 250;

const Main = () => {

const Header = useCallback(() => (
  <View style={{flex: 1}}>
  <Header/>
  </View>
), []);

const renderItem = useCallback(({ item }) => {
  return (
    <Text>Hello</Text>
  )
}, [datas]);

const [currentIndex, setCurrentIndex] = useState(0);

const RenderTabBar = props => {
  console.log(JSON.stringify(props));
  console.log(JSON.stringify(props.tabNames));
  return props.tabNames.map(el => {
    return <Text key={Math.random(100).toString()}>{el}</Text>
  })
};

return (
<Tabs.Container
  containerStyle={{flex: 1, paddingBottom: 60}}
  renderHeader={Header}
  initialTabName={0}
  renderTabBar={RenderTabBar}
  headerHeight={HEIGHT}>
    <Tabs.Tab style={{flex: 1}} label="s" name="Produkte">
      <Tabs.FlatList
        data={datas}
        renderItem={renderItem}
        keyExtractor={item => Math.random(100).toString()}
      />
    </Tabs.Tab>

    <Tabs.Tab name="Kollektionen">
      <Tabs.ScrollView>
        <View style={[styles.box, styles.boxA]} />
        <View style={[styles.box, styles.boxB]} />
        <View style={[styles.box, styles.boxA]} />
        <View style={[styles.box, styles.boxB]} />
      </Tabs.ScrollView>
    </Tabs.Tab>

    <Tabs.Tab name="Neuerscheinigungen">
    <Tabs.ScrollView>
        <View style={[styles.box, styles.boxA]} />
        <View style={[styles.box, styles.boxB]} />
        <View style={[styles.box, styles.boxA]} />
    </Tabs.ScrollView>
    </Tabs.Tab>
</Tabs.Container>
)
};

..................................................... ..................................................... ………………………………………………………………………………………………………………………………………………………… ..................................................... .....................

标签： react-nativeexporeact-native-tab-view

Answer 1

基本用法如下所示：

<
Tabs.Container
...

TabBarComponent = {
    (props) => ( <
        MaterialTabBar {
            ...props
        }
        activeColor = "red"
        inactiveColor = "yellow"
        inactiveOpacity = {
            1
        }
        labelStyle = {
            {
                fontSize: 14
            }
        }
        />
    )
} >

{
    ...
}

<
/Tabs.Container>

https://github.com/PedroBern/react-native-collapsible-tab-view/blob/main/src/MaterialTabBar/TabBar.tsx