react / react/react-native

ScrollView doesn't scroll to focused element

Aperta
#28,509 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Component: ScrollView Help Wanted :octocat: Needs: Attention Newer Patch Available Platform: Android
Lingua principale
C++
Stelle
127k
Fork
25.3k
Merge medio
1g 23h
PR unite (30g)
4

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia da ReactScrollView.java, in particolare dai metodi arrowScroll e requestChildFocus descritti nel report. Riproduci il problema utilizzando l’esempio App.ts fornito su un emulatore AndroidTV o su una Xiaomi MI BOX, navigando tra le ultime righe. Il lavoro è terminato quando ScrollView segue costantemente l’elemento focalizzato spostandosi verso l’alto e verso il basso vicino alla parte inferiore.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
android, react-native
Ambito
mobile
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.