RN R&D 기록(二): FlatList 로컬 업데이트 서브노드

2843 단어
이전 글은 RN에서 Hover 이벤트에 어떻게 응답하는지를 기록했는데, 지금은 RN의 라벨을 본떠서 실현하고자 합니다. 구체적인 UI 코드에서 업무 논리 코드의 빈번한 복사를 하지 않기 위해서입니다. 최종 효과는 기본적으로 다음과 같습니다.
 ++i}
  numColumns={6}
  style={{paddingHorizontal: 15,}}
  renderItem={({item}) => (
    
      
      
    </hoverboard>
  )}
/>
</flatlist></code></pre> 
 <blockquote> 
  <p><hoverboard>                  ，    Hover  ，            ，   “this._onHoverChanged”       。</hoverboard></p> 
 </blockquote> 
 <p>         ， Android        ，          FlatList           ，         RN   JavaScript，               （  ，      JS     。。）。<br/>            ，           ，              FlatList    ：</p> 
 <pre><code><view>
  <image source="{require('../img/icon.jpg')}" style="{{width:" len="" height:=""/>
  <text ref="text" style="{styles.text}">
    ({this.state.left}, {this.state.right}), ({this.state.top}, {this.state.bottom})
  </text>
</view>
</code></pre> 
 <p>    ，       ，             20ms   ，        。        Demo，         <text>  ，          ，                 。<br/>                ：                 ，    ，      "Component"。<br/>                    "View" ，     <touchablehighlight>   ，             ：</touchablehighlight></text></p> 
 <pre><code>render: function() {
  return (
    <view ...="">
      {React.cloneElement(
        React.Children.only(this.props.children),
        {
          ref: CHILD_REF,
        }
      )}
      {... ...}
    </view>
  );
}
</code></pre> 
 <blockquote> 
  <p>       ，                                  UI  ，“React.Children.only”           ，              。</p> 
 </blockquote> 
 <p>        ，      “this.refs” “this.props.children”        ，      “this.refs”                 ， “this.props.children”                   ，  ，            。<br/>               ：</p> 
 <pre><code>_hoverListener = (msg) => {
  let {x: hx, y: hy} = msg;
  let inHover = hx >= this.left && hx <= this.right && hy >= this.top && hy <= this.bottom;

  const isChanged = this._inHover != inHover;

  if (isChanged) {
    this.props.onHoverChanged && this.props.onHoverChanged(this.refs.text, inHover);
    this._inHover = inHover;
  }
}
</code></pre> 
</article>
                            </div>
                        </div>
벚꽃 편집기가 여러 개의 매크로 논리를 하나의 파일로 정리하는 방법 2
UWSC로 생산성 향상 [편집기 준비편]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage