当我第一次返回导航时，键盘仍然存在，但如果我中止返回导航，然后再做，键盘不再存在。是什么导致了这种奇怪的行为？我可以修复它吗？我甚至不明白为什么键盘在第一种情况下仍然存在，更不用说为什么它在第二种情况下没有。
下面是一个最小可重复的例子：
type RootStackParamList = {
Foo: undefined;
Bar: undefined;
};
const Stack = createNativeStackNavigator<RootStackParamList>();
function Bar() {
return <TextInput inputMode="tel" autoFocus />;
}
function Foo({
navigation,
}: {
navigation: NativeStackNavigationProp<RootStackParamList>;
}) {
const inputRef = useRef<TextInput>(null);
const [input, setInput] = useState("");
useEffect(
() =>
navigation.addListener("transitionEnd", () => inputRef.current?.focus()),
[navigation]
);
const onChangeInput = (text: string) => {
setInput(text);
if (text.length == 1) navigation.navigate("Bar");
};
return (
<TextInput
ref={inputRef}
value={input}
onChangeText={onChangeInput}
inputMode="tel"
autoFocus
/>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Foo" component={Foo} />
<Stack.Screen name="Bar" component={Bar} />
</Stack.Navigator>
</NavigationContainer>
);
}
1条答案
按热度按时间kxxlusnw1#
我不认为问题出在React Navigation上。
您在两个屏幕上的TextInput上都将autoFocus设置为true。因此，每次屏幕呈现时，输入都会自动对焦，至少第一次会自动对焦。当您导航回屏幕时，焦点状态将持续。
但是，你的问题可能来自于没有取消订阅导航侦听器来在每次重新渲染后进行清理，因为根据文档，当autoFocus设置为true时，输入将使用componentDidMount或useEffect进行聚焦，当你向后滑动但取消时输入很可能没有聚焦，但你看不到它，因为Bar在Foo的上面。当你进入下一个屏幕时，屏幕不一定会“卸载”-状态持续。
在useEffect中，进行此更改。