react / react/react-native

ScrollView doesn't scroll to focused element

Offen
#28,509 4 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Component: ScrollView Help Wanted :octocat: Needs: Attention Newer Patch Available Platform: Android
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Environment

Android API: 28
Device: AndroidTV emulator and Xiaomi MI BOX
React Native: 0.61.5

Description

Sometimes ScrollView doesn't scroll to currently focused element on AndroidTV devices. Looks like issue is triggered because of two scroll events, one from ReactScrollView.java arrowScroll method and one from requestChildFocus. Issue seems to occur only when scrolling on the bottom of ScrollView.

React Native version:

"0.61.5"

Steps To Reproduce

  1. Navigate with keyboard/remote controller up and down on between last rows of ScrollView.

Expected Results

Scroll follows focused element

Snack, code example, screenshot, or link to a repository:

App.ts example:

import React from 'react';
import {View, StyleProp, TextStyle, ViewStyle, TouchableOpacity, ScrollView, Text} from 'react-native';
const styles: {[name: string]: StyleProp<ViewStyle> | StyleProp<TextStyle>} = {
  container: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor: '#000',
    justifyContent: 'flex-end',
    alignContent: 'center'
  }
};
const rows = [1,2,3,4,5,6,7,8,9];
const columns = ['a', 'b', 'c', 'd', 'e', 'f'];
type Props = {
  text: string;
  number: number;
}
const MyButton = (props: Props) => {
  return (
    <TouchableOpacity
      style={{width: 200, height: 200, margin: 50, backgroundColor: `rgba(100,255,0,0.3)`}}
      key={props.text + props.number}
      onPress={() => {}}
    >
      <Text>{props.text + props.number}</Text>
    </TouchableOpacity>
  );
};
const App = () => {
  return (
    <View style={styles.container}>
      <ScrollView>
        {rows.map((number) => (
          <ScrollView
            horizontal={true}
            key={'scrollview' + number}
          >
            {columns.map((text) => <MyButton text={text} number={number} key={text + number} />)}
          </ScrollView>
        ))
        }
      </ScrollView>
    </View>
  );
};
export default App;

In gif below i navigated up and down only:
brokenScrolling2

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit ReactScrollView.java, insbesondere mit den im Bericht beschriebenen Methoden arrowScroll und requestChildFocus. Reproduziere das Problem anhand des bereitgestellten App.ts-Beispiels auf einem AndroidTV-Emulator oder einer Xiaomi MI BOX, indem du zwischen den letzten Zeilen navigierst. Als erledigt gilt die Aufgabe, wenn der ScrollView dem fokussierten Element beim Auf- und Abwärtsbewegen nahe am unteren Ende konsistent folgt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
android, react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.