React Native Switch Selector自动切换选项功能实现求助

我想实现让React Native SwitchSelector在「User」和「Business」两个选项间自动切换的功能，尝试用useRef创建switchRef并调用switchRef.current?.setSelectedIndex(selectedIndex)，同时给组件添加ref={switchRef}，但这种方法不生效。原组件代码如下：

<SwitchSelector
    initial={0}
    onPress={(value) => scrollTo(value)}
    textColor={'#3E82FF'}
    selectedColor={'#fff'}
    buttonColor={'#3E82FF'}
    borderColor={'#3E82FF'}
    hasPadding
    options={[
        { label: "User", value: "user"}, 
        { label: "Business", value: "business"} 
    ]}
    style={{
        marginTop: 90,
        marginLeft: 40,
        marginRight:40
    }}
/>

改用状态驱动实现自动切换 #

多数第三方UI组件更适合用状态控制而非直接调用ref方法，以下是可行方案：

1. 用useState维护选中状态，用useEffect设置定时器自动切换
2. 将选中状态绑定到SwitchSelector的selectedIndex属性（匹配库的API设计）

完整代码示例：

import React, { useState, useEffect } from 'react';
import SwitchSelector from 'react-native-switch-selector';

const YourComponent = () => {
    // 维护选中索引：0对应User，1对应Business
    const [selectedIndex, setSelectedIndex] = useState(0);

    // 设置定时器实现自动切换
    useEffect(() => {
        const interval = setInterval(() => {
            // 循环切换索引：0→1→0
            setSelectedIndex(prev => prev === 0 ? 1 : 0);
        }, 2000); // 每2秒切换一次，可自行调整时间间隔

        // 组件卸载时清理定时器，避免内存泄漏
        return () => clearInterval(interval);
    }, []);

    // 原有滚动逻辑保留
    const scrollTo = (value) => {
        // 你的滚动处理代码
    };

    return (
        <SwitchSelector
            initial={0}
            selectedIndex={selectedIndex} // 绑定选中状态，驱动组件更新
            onPress={(value) => scrollTo(value)}
            textColor={'#3E82FF'}
            selectedColor={'#fff'}
            buttonColor={'#3E82FF'}
            borderColor={'#3E82FF'}
            hasPadding
            options={[
                { label: "User", value: "user"}, 
                { label: "Business", value: "business"} 
            ]}
            style={{
                marginTop: 90,
                marginLeft: 40,
                marginRight:40
            }}
        />
    );
};

export default YourComponent;

为什么ref方法无效？ #

react-native-switch-selector库的ref并未向外暴露setSelectedIndex方法，组件的选中状态是通过props（如selectedIndex）来驱动更新的，直接调用ref方法无法触发组件的重新渲染和状态同步。

内容的提问来源于stack exchange，提问作者oliver_enede