RN中tabView组件点击tab无法切换View内容?-灵析社区

莫克先森

ReactNative 中的tabview点击tab无法切换view, import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { View, StyleSheet, Dimensions, Text } from 'react-native'; import { TabView, SceneMap, TabBar } from 'react-native-tab-view'; type Route = { key: string; title: string; }; type State = { index: number; routes: Route[]; }; const initialTabState: State = { index: 0, routes: [ { key: 'tab1', title: 'Tab 1' }, { key: 'tab2', title: 'Tab 2' }, { key: 'tab3', title: 'Tab 3' }, { key: 'tab4', title: 'Tab 4' }, { key: 'tab5', title: 'Tab 5' }, { key: 'tab6', title: 'Tab 6' }, { key: 'tab7', title: 'Tab 7' }, { key: 'tab8', title: 'Tab 8' }, ], }; const FirstRoute = () => ( ); const SecondRoute = () => ( ); const ThirdRoute = () => ( ); const FourthRoute = () => ( ); const FifthRoute = () => ( ); const SixthRoute = () => ( ); const SeventhRoute = () => ( ); const EighthRoute = () => ( ); const TabScreen: React.FC = () => { const [tabState, setTabState] = useState(initialTabState); const renderScene = SceneMap({ '1': FirstRoute, '2': SecondRoute, '3': ThirdRoute, '4': FourthRoute, '5': FifthRoute, '6': SixthRoute, '7': SeventhRoute, '8': EighthRoute, }); const renderTabBar = (props: any) => ( { console.log(route) const index = initialTabState.routes.findIndex(item => item.key == route.key); handleIndexChange(index); }} /> ); const handleIndexChange = (index: number) => { setTabState({ ...tabState, index }); }; useEffect(() => { console.log(tabState.index); }, [tabState]) return ( ); }; const styles = StyleSheet.create({ scene: { flex: 1, }, tabStyle: { width: 'auto', }, indicatorStyle: { backgroundColor: '#000', }, tabBarStyle: { backgroundColor: '#fff', }, labelStyle: { color: '#000', }, }); export default TabScreen; "react": "18.2.0", "react-native": "0.72.6", "react-native-tab-view": "^3.5.1", 去除自定义tab改成原生的也不行

阅读量:17

点赞量:0

问AI
"SceneMap "里面的"key" 需要"initialTabState "里面"routes"每一项的"key"对应,然后你👀掉onTabPress 就可以了