React-Native踩坑历险记之TextInput首次聚焦失焦问题

前言 

        这两天被一个问题深深困扰，就是每次组件重新渲染后，在文本框进行聚焦的时候，第一次聚焦总是聚焦后迅速失焦，键盘弹出又弹回，之后就正常。一开始考虑到重新渲染的问题，逐一排查了每个state状态，发现并非状态问题，经过不断简化代码，最后确诊了问题：PagerView列表渲染导致。

我的简化代码如下，在这种列表渲染的情况下出现了组件加载后首次聚焦自动失焦问题

    <PagerView
      style={{ flex: 1, backgroundColor: 'black' }}
      orientation={'vertical'}
      scrollEnabled={true}
      initialPage={0}
    >
      {videos.map((el, index) => (
        <View style={{flex:1}}>
      <TextInput placeholder='请输入内容' style={{backgroundColor:'white',position:'absolute',bottom:0,width:'100%',height:hp(10)}}></TextInput>
      </View>
      ))}
      
    </PagerView>

 

TextInput焦点正常运作的代码如下

<PagerView
      style={{ flex: 1, backgroundColor: 'black' }}
      orientation={'vertical'}
      scrollEnabled={true}
      initialPage={0}
      onPageSelected={onPageSelected}
    >
      <View style={{flex:1}}>
          <TextInput placeholder='你好呀' style={{backgroundColor:'white',position:'absolute',bottom:0,width:'100%',height:hp(10)}}></TextInput>
      </View>
      
    </PagerView>

总结

PagerView在进行列表循环的时候会引起焦点错乱问题，不适合需要进行焦点管理的应用场景，如评论区。

题外话

        其实，PagerView是一个比较不错的书写短视频应用的标签，奈何与TextInput的焦点管理不太兼容。如果有对应的解决方案，可以与我深入交流洽谈