taro/src/components/navigation/Segment.tsx

import { View, Text } from '@tarojs/components'
import './Segment.scss'
import { useState } from 'react'

export default function Component(props: {
    index?: number,
    titles: Array<string>,
    changed: Function
}) {
    const [current, setCurrent] = useState(props.index ? props.index : 0)


    function selItem(index) {
        setCurrent(index);
        props.changed(index);
    }

    return <View className='segment'>
        <View className={current == 0 ? 'segment_item segment_item_sel' : 'segment_item'} onClick={(e) => {
            if (process.env.TARO_ENV == 'weapp') {
                e.stopPropagation()
            }; selItem(0)
        }}>
            <Text className={current == 0 ? 'segment_text_sel' : 'segment_text'}>{props.titles[0]}</Text>
        </View>
        <View style={{ width: 16 }} />
        <View className={current == 1 ? 'segment_item segment_right segment_item_sel' : 'segment_item segment_right'} onClick={(e) => {
            if (process.env.TARO_ENV == 'weapp') {
                e.stopPropagation()
            }; selItem(1)
        }}>
            <Text className={current == 1 ? 'segment_text_sel' : 'segment_text'}>{props.titles[1]}</Text>
        </View>
    </View>
}