ReactNative 中TextInput刚进入页面获取焦点

需求:进入ReactNative页面中,页面上含有TextInput控件,则TextInput 获取焦点,将键盘弹出需求。

TextInput 页面出现的时期
1、页面刚渲染出来就出现TextInput。
2、页面中通过设置state值后页面,渲染出TextInput。

针对于第一中情况,查看RN中 TextInput属性 可以看到 autoFocus该属性
如果为true,在componentDidMount后会获得焦点。默认值为false。

第二种情况,因为componentDidMount 在页面生成时只执行一次。通过设置state值后,渲染出TextInput 并不能通过设置autoFocus来获取焦点。

通过refs来实现 focus();

具体参考代码如下:

<TextInput autoFocus={true} multiline={true} clearButtonMode={'while-editing'}
             style={{
                              fontSize: 14,
                              marginTop: 0,
                              flex: 1,
                              backgroundColor: '#ffffff'
                          }} 
             onChangeText={(text) => this.updateText(text)} ref='textInputRefer'
             placeholder={'请输入内容'}/>

componentDidUpdate(){
if (this.refs.textInputRefer != undefined) {
        this.refs.textInputRefer.focus();
}
},
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近在研究React-Native,把该配置的环境都配置了一遍,HelloWorld跑起来了之后,现在开始学习、熟...
    小朱v阅读 986评论 0 1
  • 对React-Native的学习,从熟悉基本控件开始。 View 属性方法 序号名称属性Or方法类型说明 1 ac...
    诺花生阅读 884评论 0 0
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,312评论 0 2
  • TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成...
    亭止阅读 3,294评论 1 0