リアクションリンクがジャンプしない問題の解決方法-jsチュートリアル-php.cn

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

藏色散人

リリース： 2021-11-26 11:40:21

オリジナル

3697 人が閲覧しました

反応リンクがジャンプしない場合の解決策: 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>

ログイン後にコピー

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