반응 링크가 점프하지 않는 문제를 해결하는 방법

반응 링크가 점프하지 않는 경우: 1. 원격으로 JS를 끄고 2. 루트 경로 경로 구성 요소에 추가 항목을 추가합니다. 3. 링크 구성 요소의 속성으로 TouchableOpacity를 전달합니다.

이 기사의 운영 환경: Windows7 시스템, React17.0.1, Dell G3.

반응 링크가 점프하지 않는 문제를 해결하는 방법은 무엇입니까?

react 라우터 기본: 링크를 클릭해도 점프하지 않습니다

rnembeds 기본, TouchableOpacity 구성 요소 콘텐츠를 클릭해도 응답이 없거나 점프하지 않습니다.

// App.js
const history = createMemoryHistory()
<Router history={ history }>
    <Switch>
        <Route path="/" component={ Home }/>
        <Route path="/test" component={ Test } />
    </Switch>
</Router>


// Home.js
<View>
    <Link to="/test">
        <TouchableOpacity key={ text } style={ styles.wrapper }>
            <Text style={ styles.text }>{ text }</Text>
        </TouchableOpacity>
    </Link>
</View>

1 원격으로 JS를 끄세요

TouchableOpacity가 왜 있는지 모르겠습니다. 원격 디버깅이 켜진 후에 발생합니다. 유효하지 않습니다. 닫은 후 TouchableOpacity 효과를 클릭하면 볼 수 있지만 여전히 점프할 수는 없습니다

2. 루트 경로 루트 구성 요소에 추가 추가

// App.js
<Router history={ history }>
    <Switch>
        <Route extra path="/" component={ Home }/> // 增加extra
        <Route path="/test" component={ Test } />
    </Switch>
</Router>

저는 rn 개발에 익숙하지 않아서 처음에는 걱정했습니다. createMemoryHistory를 사용하다가 발생해서 나중에 페이지가 튕길까봐 걱정했는데 막히거나 그런걸로 생각이 빗나갔습니다

드디어 솔직히 기본 프로젝트를 찾기 위해 github에 가서 찾아본 결과 조금씩 차이점을 찾아보니 이것이 무시되는 문제라는 것을 알게 되었습니다

원리는 사실 매우 간단합니다 https://www .cnblogs.com/superlizhao/p/9280122.html

이 문제는 router4.TouchableOpacity를 통과했기 때문입니다. 링크 구성 요소의 속성으로

const linkParams = {
    pathname: '/star',
    state: { data: item },
}

<Link to={ linkParams } component={ TouchableOpacity }>
    <Item text={ item.text } index={ index }/>
</Link>

내부에 가 있으면 점프가 발생하지 않습니다

권장 학습: "

react 비디오 튜토리얼

"

위 내용은 반응 링크가 점프하지 않는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!