React Native中点击按钮触发TextInput聚焦时报错如何解决

问题原因 #

这个报错是TypeScript的类型安全检查触发的：

• 初始化useRef(null)时，TypeScript会自动推断refsFocus的类型为React.MutableRefObject<null>，默认认为current属性永远可能为空，直接调用focus()方法就会触发空值风险提醒。
• 你没有为ref指定对应的TextInput实例类型，TS无法识别current上存在focus方法。

解决方案 #

按以下步骤修改代码即可：

1. 为useRef添加泛型，指定ref关联的实例类型为TextInput，允许初始值为null
2. 调用focus方法前添加空值校验，这里推荐用可选链操作符处理，语法更简洁

修改后完整代码 #

import { TextInput, View, TouchableOpacity, Text } from 'react-native';
import { useRef } from 'react';

const MyProfileScreen = (props: any) => {
    // 指定ref的泛型类型
    const refsFocus = useRef<TextInput | null>(null);
    return (
        <>
            <View>
                <TextInput
                    placeholder={'editable test'}
                    placeholderTextColor={'red'}
                    style={{color: 'red'}}
                    ref={refsFocus}
                />
            </View>
            <TouchableOpacity
                onPress={()=> { 
                    // 用可选链避免空值报错
                    refsFocus.current?.focus();
                }}
                >
                <Text>Edit text input</Text>
            </TouchableOpacity>
        </>
    );
};

其他可选处理方式 #

如果你确定点击按钮时TextInput已经完成挂载，current一定有值，也可以用非空断言操作符跳过TS检查：

onPress={()=> { refsFocus.current!.focus();} }

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