Question

我的React Native应用程序中有一个屏幕，我的文本字段很少。

我想知道是否有任何方式在屏幕上加载我的关键字会自动打开并关注我的第一个文字输入字段？

我在android中搜索stateAlwaysVisible之类的内容。

Answer 1

当<TextField />聚焦时，键盘应自动打开。您可以使用autoFocus道具在元素装入时使其聚焦（link）

Answer 2

我的方式（在组件渲染上聚焦和显示键盘时出现问题）

import { InteractionManager, TextInput } from 'react-native';

...

inputRef = React.createRef();

componentDidMount() {
  this.focusInputWithKeyboard()
}

focusInputWithKeyboard() {
  InteractionManager.runAfterInteractions(() => {
    this.inputRef.current.focus()
  });
}

render() {
  <TextInput ref={this.inputRef} />
}

Answer 3

这个技巧对我有用

setTimeout(() => InputRef.current.focus(), 100)

Answer 4

由于堆栈导航，所选解决方案对我不起作用（请参阅所选解决方案上“ SoundStage”的注释）

我向初始设置为openTheKeyboard的状态添加了一个新变量false。

我的hacky解决方案：

componentDidMount() {
  this.setState({ openTheKeyboard: true });
}

componentDidUpdate() {
  if (this.state.openTheKeyboard) {
    this.textInput.focus();
    this.setState({ openTheKeyboard: false });
  }
}

Answer 5

这似乎在我的模拟器中起作用。尚未在真实设备上确认。

constructor(props) {
  super(props);
  this.buildNameTextInput = React.createRef();
}

<TouchableOpacity
  style={styles.mainButton}
  onPress={() => {
    this.buildNameTextInput = true
    this.props.setSaveBuildModal(true)
  }}
>
  <Text style={styles.mainButtonText}> Save Build </Text>
</TouchableOpacity>

<TextInput
  autoFocus={!!this.buildNameTextInput}
  ref={this.buildNameTextInput}
  placeholder="Type a Name"
  autoCapitalize="words"
  style={{...styles.heroBtnText, marginVertical: 50}}
  onChangeText={buildName => this.props.setCurrentBuildName(buildName)}
  value={this.props.buildName}
/>

我需要构造函数来注册引用
处理程序将局部变量设置为true
autoFocus将触发要聚焦的领域。键盘有时会在android模拟器上打开（我无法解释）。
ref用于引用DOM元素

Answer 6

您可以将 TextInput 的引用保持为文本输入引用并使用 this.textInputRef.focus()

如何在React Native中自动打开键盘？

6 个答案: