使用 react-navigation-tab 创建一个自定义的可滚动顶部标签栏？

Question

我需要使用 react 导航标签和 tabBarComponent 创建一个自定义的可滚动顶部标签栏，而不使用任何其他第三方库。

const TopTabBar = createMaterialTopTabNavigator({
    Home: HomePage,
    Entertainment: EntertainmentNews,
    Business: BusinessStack,
    Music: MusicStack,
    Politics: PoliticsStack,
    Sports: SportsStack,
    Technology: TechnologyStack,
    WorldNews: WorldNewsStack
}, {
    tabBarComponent: (props) => <TopTabBarComponent {...props}/>
})

在这个带有标签栏的组件中，我可以创建顶部栏，但是在滑动屏幕时它不会滚动？

import React , { Component } from 'react'
import { Text, View, StyleSheet, FlatList, TouchableOpacity, Animated, Dimensions} from 'react-native'

interface Props {
    navigation?: any
}

interface State {
    //
}

export class TopTabBarComponent extends Component <Props, State>{
    flatListRef
    constructor(props: Props, state: State){
        super(props, state)
    }





    onPressItem = (index) => {
        const { navigation } = this.props
        navigation.navigate( this.props.navigation.state.routes[index].routeName )
        // this.onScrollIndex(index)
    }

    renderTopBar = (item, index) => {
        const routes = this.props.navigation.state.routes
        const activeIndex = this.props.navigation.state.index

            return (
                <TouchableOpacity style = {{
                     alignItems: 'center' ,  
                     height: 50, 
                     justifyContent: 'center', 
                     borderBottomWidth: activeIndex === index ?  2 : 0, 
                     borderColor: 'green', 
                     paddingHorizontal: 5
                     }} onPress = {() => this.onPressItem(index)}>  
                    <Text style = {{ fontSize: 20, color: 'blue'}}>{item.routeName}</Text>
                </TouchableOpacity>
            )
    }

    render() {
        // reactotron.log('this.props', this.props.navigation)
        console.warn('this.props.navigation.state.index', this.props.navigation.state.index)
        return(
            <View style = {{ marginHorizontal: 5}}>
                <FlatList
                    initialScrollIndex = { this.props.navigation.state.index }
                    ref = {(ref) => { this.flatListRef = ref}}
                    // style = {{ paddingHorizontal: 20}}
                    horizontal
                    showsHorizontalScrollIndicator = {false}
                    data = {this.props.navigation.state.routes}
                    renderItem = {({item , index}) => this.renderTopBar(item, index) }
                    ItemSeparatorComponent = {() => <View style = {{ paddingRight: 40}}/>}
                    />
            </View>
        )
    }

}

这是顶部标签栏组件代码？那么如何在屏幕滑动时让顶部选项卡自动滚动呢？

Answer 1

这是我为您的测试用例快速编辑的标签栏示例。

function MyTabBar({ state, descriptors, navigation, position }) {
    const scrollViewRef = useRef(null)

    useEffect(() => {
        scrollViewRef.current.scrollTo({ x: state.index * 50, y: 0, animated: true })
    }, [state.index])

    return (
        <View style={styles.tabContainer}>
            <ScrollView ref={list => scrollViewRef.current = list} contentContainerStyle={{ flexDirection: 'row', alignItems: 'center'}} horizontal>
                {state.routes.map((route, index) => {
                    const { options } = descriptors[route.key];
                    const label =
                        options.tabBarLabel !== undefined
                        ? options.tabBarLabel
                        : options.title !== undefined
                        ? options.title
                        : route.name;

                    const isFocused = state.index === index;
                    const onPress = () => {
                        const event = navigation.emit({
                        type: 'tabPress',
                        target: route.key,
                        });

                        if (!isFocused && !event.defaultPrevented) {
                        navigation.navigate(route.name);
                        }
                    };

                    const onLongPress = () => {
                        navigation.emit({
                        type: 'tabLongPress',
                        target: route.key,
                        });
                    };

                    let focusStyle = { }; //style object to append to the focussed tab
                    let tintColor = { };
                    let fontColor = { };
                    isFocused ? focusStyle = { backgroundColor: 'darkgray' } : focusStyle = { };
                    isFocused ? tintColor = { tintColor: 'black' } : tintColor = { tintColor: 'lightgray' }; // TODO: change this with proper fontColor codes
                    isFocused ? fontColor = { color: 'black' } : fontColor = { color: 'lightgray' };
                    //below controls the rendered tab

                        return (
                            <TouchableWithoutFeedback
                                key={index}
                                onPress={onPress}
                                onLongPress={onLongPress}
                                style={[styles.tabItem, focusStyle]}
                            >
                                    <View style={styles.tabIconContainer}>
                                        <LearnTabIcon title={route.name} color={tintColor} />
                                    </View>
                                    <Text style={[styles.labelStyle, fontColor]}>
                                        {label}
                                    </Text>
                            </TouchableWithoutFeedback>
                        );
                })}
            </ScrollView>

            <View style={styles.tabBarIndicator}>
                { state.routes.map((route, index) => {
                    const isFocused = state.index === index;
                    let selectedStyle = { };
                    isFocused ? selectedStyle = { backgroundColor: 'darkgray'} : { }; // TODO: change this coloring to actual color codes
                    return (
                        <View 
                            style={[styles.tabIndicators, selectedStyle]}
                            key={index}
                        >
                        </View>
                    );
                })}
            </View>
        </View>
    );
  }

我对所有内容都使用了功能组件，因此它看起来会有些不同，但在您的自定义选项卡栏中，在每个索引更改时抓取state.index，然后使用scrollToOffset 来控制滚动视图在屏幕上居中的位置。为了简单起见，我放了一个示例 50px 偏移比例。

我也没有使用 TypeScript，但无论如何你似乎已经准备好了大部分样板。