crazycharge-app/component/global/chargingStationTabView.tsx

import {
    Text,
    ScrollView,
    useWindowDimensions,
    StyleSheet
} from 'react-native';
import React from 'react';

import { SceneMap, TabBar, TabView } from 'react-native-tab-view';

interface ChargingStationTabViewProps {
    titles: string[];
}

export const ChargingStationTabView: React.FC<ChargingStationTabViewProps> = ({
    titles
}) => {
    const layout = useWindowDimensions();

    //tab 1
    const FirstRoute = () => (
        <ScrollView style={{ flex: 1, marginHorizontal: '5%' }}>
            <Text className="text-lg" style={styles.text}>
                這是一段有關充電站的說明
            </Text>
        </ScrollView>
    );

    //tab 2
    const SecondRoute = () => (
        <ScrollView style={{ flex: 1, marginHorizontal: '5%' }}>
            <Text className="text-lg " style={styles.text}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            </Text>
        </ScrollView>
    );

    const renderScene = SceneMap({
        firstRoute: FirstRoute,
        secondRoute: SecondRoute
    });
    const [routes] = React.useState([
        { key: 'firstRoute', title: titles[0] },
        { key: 'secondRoute', title: titles[1] }
    ]);
    const [index, setIndex] = React.useState(0);

    const renderTabBar = (props: any) => (
        <TabBar
            {...props}
            renderLabel={({ route, focused }) => (
                <Text
                    style={{
                        color: focused ? '#000000' : '#CCCCCC',
                        fontWeight: focused ? '300' : 'thin',
                        fontSize: 17
                    }}
                >
                    {route.title}
                </Text>
            )}
            indicatorStyle={{
                backgroundColor: '#000000',
                height: 1
            }}
            style={{
                backgroundColor: 'white',
                elevation: 0,
                marginHorizontal: 15,
                borderBottomWidth: 0.5
            }}
        />
    );
    return (
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width }}
            renderTabBar={renderTabBar}
        />
    );
};

const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    topLeftTriangle: {
        width: 0,
        height: 0,
        borderLeftWidth: 50,
        borderBottomWidth: 50,
        borderLeftColor: '#02677D',
        borderBottomColor: 'transparent',
        position: 'absolute',
        top: 0,
        left: 0
    },
    text: {
        fontWeight: 300,
        color: '#000000'
    }
});