リアクションリンクがジャンプしない問題の解決方法

反応リンクがジャンプしない場合の解決策: 1. JS リモートをオフにする; 2. ルート パス ルート コンポーネントに追加する; 3. TouchableOpacity をリンク コンポーネントの属性として渡す。

#この記事の動作環境: Windows7 システム、react17.0.1、Dell G3。

反応リンクがジャンプしない問題を解決するにはどうすればよいですか?

ルーター ネイティブに反応する:リンクのクリックがジャンプしない

rnembed ネイティブ、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. ルート パス ルート コンポーネントに extra

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

を追加します。rn に慣れていないため、開発中、最初はcreateMemoryHistoryを使っているのが原因ではないかと心配していましたが、その後、ページが飛ぶのにブロックされるなどの不安があり、思考が迷走し続けました

最終的には素直にgithubに行きました基本的なプロジェクトを見つけて、少しずつ相違点を探した結果、これが無視されていたものであることがわかりました。 superlizhao/p/9280122.html

router4.x が多層ネストされたルーティング レポートを使用しているため、この問題が発生します。警告、調整後、原則をよく読んでいないという問題が明らかになりました。恥ずかしいです。

3. TouchableOpacity をリンク コンポーネントのプロパティとして渡します

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

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

が存在し、ジャンプは行われません

推奨される学習: "

reactビデオチュートリアル

"

以上がリアクションリンクがジャンプしない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。