ScrollView doesn't scroll to focused element
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
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
- 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:

コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
ReactScrollView.java から始め、特にレポートで説明されている arrowScroll メソッドと requestChildFocus メソッドを確認してください。提供されている App.ts の例を使い、AndroidTV エミュレーターまたは Xiaomi MI BOX 上で最後の行の間を移動して問題を再現してください。完了の条件は、下部付近で上下に移動するときに ScrollView がフォーカスされた要素を一貫して追従することです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- android, react-native
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100