我正在尝试设置选项卡名称的样式但不工作。道具 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>
)
};
..................................................... ..................................................... ………………………………………………………………………………………………………………………………………………………… ..................................................... .....................