React Native Viewpager中的自动焦点输入答案

【问题标题】：Auto focus Input within React Native ViewpagerReact Native Viewpager中的自动焦点输入
【发布时间】：2020-08-27 21:22:16
【问题描述】：

我正在使用 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，而且可能还有更好的方法来实现我想要实现的目标。

【问题讨论】：

标签： reactjs react-native android-viewpager react-navigation react-native-elements

【解决方案1】：

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

    // 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]);

【讨论】：