React Native Viewpager中的自动焦点输入

debugcn 发表于 Dev

jdperos

我正在使用React Native Viewpager来接受用户输入，并在按下按钮时移至下一页。重要的是要注意，移至下一页是在按下按钮时发生的，而不是通过正常滚动（已禁用）进行的。

我认为处理此问题的最佳方法是在ViewPager上有一个状态，该状态会传播到子项中。

ViewPager.tsx：

export default function ViewPager({ route, navigation }) {

    const ref: React.RefObject<ViewPager> = React.createRef();
    const [currentPage, setCurrentPage] = useState(0);

    let setEntryPage = (page: number) => {
        ref.current?.setPage(page);
        setCurrentPage(page);
    }


    return (
        <View style={{flex: 1}}>
            <ViewPager
                style={styles.viewPager}
                initialPage={0}
                ref={ref}
                scrollEnabled={false}
            >
                {
                    GlobalStuff.map((entry, index) => {
                        return (
                            <Entry
                                key={index}
                                index={index}
                                pagerFocusIndex={currentPage}
                                pagerLength={quizDeck?.litems.length!}
                                setEntryPage={setEntryPage}
                            />
                        )
                    })
                }
            </ViewPager>
        </View>
    );
};

Entry.tsx：

export function Entry(props: EntryProps) {

    const inputRef: React.RefObject<Input> = React.createRef();
    if (props.pagerFocusIndex === props.index) {
        inputRef.current?.focus();
    }

    return (
        <View>
            <Input
                // ...
                ref={inputRef}
            />
            <IconButton
                icon="arrow-right-thick"
                color={colorTheme.green}
                onPress={() => {
                    props.index !== props.pagerLength - 1 ?
                        props.setEntryPage(props.index + 1) :
                        props.navigation!.reset({ index: 0, routes: [{ name: recapScreenName as any }] });
                }}
            />
// ...

不幸的是，inputRef似乎是null，并且可能有一种更好的方式来实现我正在尝试实现的目标。

窗台

每次组件渲染时，渲染循环中的任何内容都会被调用。

    // This is called on every render
    const inputRef: React.RefObject<Input> = React.createRef();
    
    // So is this, it's always null
    if (props.pagerFocusIndex === props.index) {
        inputRef.current?.focus();
    }

产生副作用。

    // Untested
    const inputRef = useRef();

    useEffect(() => {
        if (props.pagerFocusIndex === props.index) {
            inputRef.current?.focus();
        }
    }, [inputRef.current, props.pagerFocusIndex, props.index]);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。