react-native-tab-view 使用详解

import React, {PureComponent} from 'react';
import {
    SafeAreaView,
    Image,
    FlatList,
    Platform,
    BackHandler,
    View,
    Text,
    TextInput,
    Alert,
    ImageBackground,
    TouchableOpacity,
   Dimensions
} from 'react-native'
import Title from '../../components/Title'
import {SceneMap, TabView,TabBar} from "react-native-tab-view";
export default class CustManagement extends PureComponent {
    // 默认属性
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            index: 0,
            routes: [
                { key: 'first', title: '注册未申请' },
                { key: 'second', title: '正式客户' },
                { key:'third', title: '白名单' },
                { key: 'fourth', title: '黑名单' },
            ],
        };
    }
    // 渲染
    render() {
        return (
            <SafeAreaView style={{flex:1,backgroundColor:'#eee'}}>
                <Title back title={'客户管理'} forward onPressBack={()=>this.props.navigation.goBack()}/>
                <TabView
                    navigationState={this.state}
                    renderScene={SceneMap({
                        first:() => <FirstRoute {...this.props} />,
                        second: () => <SecondRoute {...this.props} />,
                        third: () => <ThirdRoute {...this.props} />,
                        fourth: () => <FourthRoute {...this.props} />,
                    })}
                    onIndexChange={index => this.setState({ index })}
                    initialLayout={{ width: Dimensions.get('window').width }}
                    renderTabBar={props =>
                        <TabBar
                            {...props}
                            style={{backgroundColor: "#f5f5f5",
                                shadowColor: "#d4d4d4",
                                shadowOffset: {
                                    width: 0,
                                    height: verticalScale(1)
                                },
                                shadowRadius: 0,
                                shadowOpacity: moderateScale(1)}}
                            getLabelText={({ route }) => route.title}
                            labelStyle={{fontFamily: "PingFangSC-Regular",
                                fontSize: moderateScale(15),
                                }}
                            tabStyle={{height:verticalScale(44)}}
                            indicatorStyle={{ backgroundColor: '#4a79e0' }}
                            activeColor={'#4a79e0'}
                            inactiveColor={'#666666'}

                        />
                    }
                />
            </SafeAreaView>
        );
    }

}
class FirstRoute extends  PureComponent{
    constructor(){
        super()
    }
    render(){
        return(
            <View/>
        )
    }
}
class SecondRoute extends  PureComponent{
    constructor(){
        super()
    }
    render(){
        return(
            <View/>
        )
    }
}
class ThirdRoute extends  PureComponent{
    constructor(){
        super()
    }
    render(){
        return(
            <View/>
        )
    }
}
class FourthRoute extends  PureComponent{
    constructor(){
        super()
    }
    render(){
        return(
            <View/>
        )
    }
}