使用autoFocus时响应导航TabNavigator

Question

在react导航中，有一个具有autoFocus输入的表单的选项卡自动拉出键盘的最佳方式是什么？

当Navigator初始化所有屏幕时，它会自动显示键盘，即使没有autoFocus元素的屏幕首先显示。

我希望它打开键盘，当我在选项卡上与表单，但关闭它时，我离开那个视图。

下面是一个示例(和相关联的要点)：

App.js

const AppNavigator = TabNavigator( {
  listView: { screen: TheListView },
  formView: { screen: TheFormView }
} )

TheFormView.js

const TheFormView = () => {
  return (
    <View style={{ marginTop: 50 }}>
      <TextInput
        autoFocus={ true }
        keyboardType="default"
        placeholder="Blah"
      />
    </View>
  )
}

TheListView.js

const TheListView = () => {
  return (
    <View style={{ marginTop: 50 }}>
      <Text>ListView</Text>
    </View>
  )
}

Answer 1

您应该使用lazy on TabNavigator config：https://github.com/react-community/react-navigation/blob/master/docs/api/navigators/TabNavigator.md#tabnavigatorconfig

这将防止屏幕在被查看之前被初始化。

还可以考虑使用某种状态管理或查找Custom (https://reactnavigation.org/docs/navigators/custom)来将autoFocus支柱设置为只有在导航到TheFormView时才为真。

Answer 2

到2020年4月，这个答案对我来说已经过时了，但这对我来说是有效的：

import { useFocusEffect, } from "@react-navigation/native"
import React, { useEffect, useState, } from "react"
...
const CreateProfileScreen = ({ navigation, }) => {
   const [safeToOpenKeyboard, setSafeToOpenKeyBoard] = useState(false)
   ...
   useFocusEffect(
        React.useCallback(() => {
            console.log("Navigated to CreateProfileScreen")
            setSafeToOpenKeyBoard(true)
            return () => {
                console.log("Navigated away from CreateProfileScreen")
                setSafeToOpenKeyBoard(false)
            }
        }, [])
    )
   ...
   return (<TextInput autoFocus={safeToOpenKeyboard}/>)
}