>  기사  >  웹 프론트엔드  >  React-Native에서 ListView 컴포넌트의 클릭 점프 구현 방법

React-Native에서 ListView 컴포넌트의 클릭 점프 구현 방법

小云云
小云云원래의
2018-01-30 17:43:251930검색

이 글에서는 주로 React-Native에서 ListView 컴포넌트의 클릭 점프에 대한 관련 정보를 소개합니다. ListView는 React Native의 핵심 컴포넌트로서 수직 스크롤이 가능한 변화하는 데이터 목록을 효율적으로 표시하는 데 사용됩니다. 도움이 필요한 친구들이 참고할 수 있습니다. 아래를 살펴보겠습니다.

먼저 효과를 살펴보겠습니다

Usage

NewsList.js

_onPress(rowData) {
 this.props.navigator.push({
 title: rowData,
 component: CNodeJSList,
 passProps: {
 name: rowData,
 }
 })
}

Instructions

  • 다음 뷰로 이동할 구성 요소를 지정하려면 this.props.navigator.push()를 사용하세요. 값을 전달하려면 passProps 속성을 사용하고 다음 뷰에서 this.props.name을 사용하여 이를 수신할 수 있습니다.

  • onPress 메서드 호출의 경우 _onPress 메서드가 onPress={로 호출되는 경우 this._onPress}, 페이지는 점프하지 않으며 this에 바인딩해야 합니다. 작성 방법은 다음과 같습니다. onPress={this._onPress.bind(this)} 하지만 값을 전달할 수 없는 것 같아서 전달합니다. 값을 다음과 같이 작성해야 합니다. onPress={()=> {this._onPress(rowData)}} 그러면 문제가 없으며 페이지가 성공적으로 이동할 수 있습니다.

관련 권장사항:

다른 페이지로 이동하기 위한 div 클릭의 JS 구현 예제 코드

WeChat 애플릿 기능 조절로 다중 클릭 점프를 방지하는 방법

자세한 설명 예제 JS 클릭 점프의 간단한 구현 방법 로그인 이메일 기능을 이전하려면

위 내용은 React-Native에서 ListView 컴포넌트의 클릭 점프 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.