リアクションアクティブなシーンでのみネイティブのアクセシビリティIDを表示

Question

TalkBackは、以前にナビゲートした非アクティブなシーンからReact Native 0.35.0アンドロイドアプリでアクセシビリティIDを検出できます。アクセシビリティ識別子を識別する際に現在のシーンのみが使用されるようにするにはどうすればよいですか？

たとえば、私は自分のアプリケーションの最初のページでアイテムのListViewをレンダリングしています。これらは、任意の項目を選択できるアクセシビリティ識別子で期待どおりに機能します。

問題は、次のページにテキストのみの1行を持っているページを移動するときに、新しいシーンを見たとき、前のシーンからすべてのリストビューの項目がまだアクセス可能です！

私は、ナビゲーションのために、NavigationExperimental、特にNavigationCardStackを使用しています。私はNavigationCardStackがスタック内の各訪問されたシーンをレンダリングしますが、アクティブなシーンのみが選択可能な方法を探していると認識しています。

これまでは、アクティブシーンのみをレンダリングするNavigationExperimentalのバージョンを実装しようとしました。この問題を解決している間に、ナビゲーションアニメーションが台無しになり、アプリを通ってナビゲートすると各シーンが再現され、私の意見では鈍い、容認できない経験ができます。

解決方法が気に入らないうちに、最初のページのすべてのコンポーネントで{accessible = {false}が設定されていると思われます。残念ながら、これでもTextコンポーネントはアクセス可能なままです。それが機能していれば、NavigationExperimentalのプロパティscene.isActiveにアクセスできるように設定できました。

Answer 1

この問題を解決できました。 React Nativeには、importantForAccessibilityというAndroidが設定できる属性があります。私が好むよりも少し集中的ですが、私自身のNavigationCardStackとNavigationCard（拡張リアクトネイティブのバージョンを実装して自分自身のロジックをレンダリングに追加）を実装しました。

NavigationCardStackで各シーンを繰り返し処理している間に、現在のインデックスを調べることでアクティブシーンでのみtrueに設定されたisActiveScreenという新しいプロパティを渡します。スタック内の他のすべてのシーンが無隠す-子孫が設定されていながら、Android上でこのように

importantForAccessibility={this.props.isActiveScreen ? 'yes' : 'no-hide-descendants'} 

を追加することにより、NavigationCard IレバレッジimportantForAccessibilityで次に

だけ私の現在表示されたシーンは、アクセシビリティを有効にしています。

Answer 2

react-navigationライブラリを使用して同じ問題が発生しました。私はちょうどレンダリング方法を変更し、ここで見つけることができた。この問題を解決するために、react-navigation/src/views/CardStack/Card.jsを変更することができました（:(書式を設定するためのコードを取得できません）

Card.js @ Github

次の私のmodifcationsですこれに次のように誰もがそれを必要とする場合

// Fixes an issue on Android whereby talkback/voiceover will pick up elements on a child view that is not active in the stack navigator 
if(this.props.scene.isActive) { 
    importantForAccessibility='yes'; 
} else { 
    importantForAccessibility='no-hide-descendants'; 
} 

return (
    <Animated.View 
    pointerEvents={pointerEvents} 
    ref={this.props.onComponentRef} 
    style={[styles.main, style]} 
    importantForAccessibility={importantForAccessibility} 
    > 
    {children} 
    </Animated.View> 
); 

この修正は、NPMに公開githubの&にフォークされました： https://github.com/awseeley/react-navigation

をhttps://www.npmjs.com/package/react-navigation-awseeley