我在React Native应用程序中有一个屏幕,其中我有一些文本字段。我想知道是否有任何方法在屏幕上加载我的关键字自动打开,并集中在我的第一个文本输入字段?我在android中搜索类似stateAlwaysVisible的东西。
stateAlwaysVisible
ijnw1ujt1#
当<TextInput />聚焦时,键盘应自动打开。你可以使用autoFocus属性使它在元素挂载时聚焦(链接)
<TextInput />
autoFocus
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} /> }
wj8zmpe13#
这一招对我很管用
setTimeout(() => InputRef.current.focus(), 100)
uqzxnwby4#
另一个解决方案:)
import React, { useRef } from 'react' export function mycomponent(props) { const inputRef = useRef(); return( <TextInput ref={inputRef} onLayout={()=> inputRef.current.focus()}> </TextInput> ) }
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} />
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({});
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
f8rj6qna8#
您可以将TextInput的引用维护为textInputRef,并使用this. textInputRef.focus()
yzckvree9#
由于堆栈导航,所选解决方案对我不起作用(请参阅“SoundStage”对所选解决方案的评论)我添加了一个新变量openTheKeyboard到最初设置为false的状态。我的Hacky解决方案:
openTheKeyboard
false
componentDidMount() { this.setState({ openTheKeyboard: true }); } componentDidUpdate() { if (this.state.openTheKeyboard) { this.textInput.focus(); this.setState({ openTheKeyboard: false }); } }
9条答案
按热度按时间ijnw1ujt1#
当
<TextInput />
聚焦时,键盘应自动打开。你可以使用autoFocus
属性使它在元素挂载时聚焦(链接)sy5wg1nm2#
我的方式(有一个问题,重点和显示一个键盘上组件渲染)
wj8zmpe13#
这一招对我很管用
uqzxnwby4#
另一个解决方案:)
jyztefdp5#
对我很有效。
yyhrrdl86#
这就是它在代码中的样子,使用setTimeout()钩子
juud5qan7#
这似乎是在我的模拟器工作。尚未在真实的器械上确认。
1.我需要构造函数来注册引用
1.处理程序将局部变量设置为true
f8rj6qna8#
您可以将TextInput的引用维护为textInputRef,并使用this. textInputRef.focus()
yzckvree9#
由于堆栈导航,所选解决方案对我不起作用(请参阅“SoundStage”对所选解决方案的评论)
我添加了一个新变量
openTheKeyboard
到最初设置为false
的状态。我的Hacky解决方案: