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

9gm1akwq  于 2023-05-23  发布在  React
关注(0)|答案(9)|浏览(369)

我在React Native应用程序中有一个屏幕,其中我有一些文本字段。
我想知道是否有任何方法在屏幕上加载我的关键字自动打开,并集中在我的第一个文本输入字段?
我在android中搜索类似stateAlwaysVisible的东西。

ijnw1ujt

ijnw1ujt1#

<TextInput />聚焦时,键盘应自动打开。你可以使用autoFocus属性使它在元素挂载时聚焦(链接)

sy5wg1nm

sy5wg1nm2#

我的方式(有一个问题,重点和显示一个键盘上组件渲染)

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

...

inputRef = React.createRef();

componentDidMount() {
  this.focusInputWithKeyboard()
}

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

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

wj8zmpe13#

这一招对我很管用

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

uqzxnwby4#

另一个解决方案:)

import React, { useRef } from 'react'

export function mycomponent(props) {
   const inputRef = useRef();
   
   return(
         <TextInput 
           ref={inputRef}
           onLayout={()=> inputRef.current.focus()}>
         </TextInput>
   )
}
jyztefdp

jyztefdp5#

对我很有效。

<TextInput
        autoFocus={false}
        autoCapitalize="none"
        onChangeText={(val) => {
            props.onChange(val);
        }}
        value={null}
        defaultValue={props.defaultValue}
        ref={(ref) => {

            if( ref !== undefined && ref && !ref.isFocused() ){

                ref.focus();
            }
        }}
        {...propsMerge}
    />
yyhrrdl8

yyhrrdl86#

这就是它在代码中的样子,使用setTimeout()钩子

import { StyleSheet, Text, View, TextInput } from "react-native";
import React from "react";

const HomeScreen = () => {
  const inputRef = React.useRef();

  setTimeout(() => inputRef.current.focus(), 100);
  return (
    <View style={{ paddingVertical: 20 }}>
      <Text>circle</Text>
      <TextInput ref={inputRef} />
    </View>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({});
juud5qan

juud5qan7#

这似乎是在我的模拟器工作。尚未在真实的器械上确认。

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}
/>

1.我需要构造函数来注册引用
1.处理程序将局部变量设置为true

  1. autoFocus将触发要聚焦的字段。键盘有时会在Android模拟器上打开(这我无法解释)。
  2. ref用于对DOM元素的引用
f8rj6qna

f8rj6qna8#

您可以将TextInput的引用维护为textInputRef,并使用this. textInputRef.focus()

yzckvree

yzckvree9#

由于堆栈导航,所选解决方案对我不起作用(请参阅“SoundStage”对所选解决方案的评论)
我添加了一个新变量openTheKeyboard到最初设置为false的状态。
我的Hacky解决方案:

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

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

相关问题