javascript - React Native - 根据标签栏文本宽度更改指示器宽度(react-native-tab-view)
问题描述
我正在使用react-native-tab-view
,并尝试更改指示器宽度。我想和我indicator width
一样the tab text
。但我所做的只是默认设置。我尝试了很多方法,但总是给我错误的结果。标签栏也应该可以水平滚动。你能检查一下我应该改变哪一部分吗?
ShowAllIndex 代码:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.dark,
},
});
const ShowAllIndex = () => {
const { seller } = useSelector((s) => s.auth, shallowEqual);
const [routes] = useState([
{ key: 'best', title: 'BEST' },
{ key: 'jacket', title: '아우터' },
{ key: 'pants', title: '바지' },
{ key: 'skirts', title: '스커트' },
{ key: 'topClothe', title: '원피스' },
{ key: 'one', title: '바지' },
{ key: 'two', title: '스커트' },
{ key: 'three', title: '상의' },
]);
const renderScene = SceneMap({
best: ShowAllMainRoutes,
jacket: JacketRoutes,
pants: PantsRoutes,
skirts: SkirtsRoutes,
topClothe: TopClotheRoutes,
one: ShowAllMainRoutes,
two: JacketRoutes,
three: PantsRoutes,
});
return (
<ScrollView style={[styles.container, { marginTop: Global() }]}>
<CustomTabView
routes={routes}
renderScene={renderScene}
scrollEnabled={true}
tabStyle={{ width: 'auto' }}
showAll={true}
/>
</ScrollView>
);
};
export default ShowAllIndex;
自定义标签视图代码:
const initialLayout = { width: Dimensions.get('window').width };
const CustomTabView = ({
routes,
renderScene,
numberOfTabs,
indicatorWidth,
scrollEnabled = false,
tabStyle,
showAll,
indicatorStyle,
}) => {
const [index, setIndex] = useState(0);
const renderTabBar = (props) => (
<TabBar
{...props}
scrollEnabled={scrollEnabled}
indicatorStyle={[
indicatorStyle,
{
backgroundColor: colors.barbie_pink,
height: 2.5,
bottom: -1,
},
]}
style={[styles.tabBar]}
renderLabel={({ route, focused }) => {
return (
<Text
style={[styles.label, focused ? styles.activeLabel : styles.label]}
>
{route.title}
</Text>
);
}}
tabStyle={tabStyle}
/>
);
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
renderTabBar={renderTabBar}
onIndexChange={setIndex}
initialLayout={initialLayout}
style={[styles.container]}
/>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: colors.dark,
},
scene: {
flex: 1,
marginTop: 5,
},
tabBar: {
backgroundColor: 'transparent',
shadowOpacity: 0,
elevation: 0,
borderBottomWidth: 0.5,
borderColor: colors.very_light_pink_two,
marginBottom: 5,
},
label: {
color: colors.very_light_pink_four,
fontSize: 14,
lineHeight: 20.8,
fontFamily: 'NotoSansCJKkr-Regular',
letterSpacing: -0.35,
},
activeLabel: {
color: colors.barbie_pink,
},
});
谢谢你的回答!
解决方案
我认为indicatorStyle
TabBar 中的道具可以解决您的问题。
推荐阅读
- c++ - 将三位值存储到无符号字符数组
- python - 为 Flask 应用程序完成 Ctrl+C 后,如何执行某些特定的语句集?
- python - 是否有任何文档描述 GSOC 算法(背景减法)的工作方式?
- oracle - 如何在 etext 模板中格式化数字
- java - 有没有办法从 android 的 google play store 获取推荐码?
- c - 需要帮助创建没有多次返回的递归函数
- stm32 - 如何使用 HAL_UART_Receive() 从 stm32 中的移远 L89 GPS 模块读取数据?
- regex - RegEx 用于忽略定义的边界
- python - 为什么 BeautifulSoup 不抓取整个网页?
- scala - jar 文件未显示在 docker 容器中