ScrollView doesn't scroll to focused element
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- C++
- Star
- 127k
- Fork
- 25.3k
- Merge trung bình
- 1 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
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:

Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu với ReactScrollView.java, đặc biệt là các phương thức arrowScroll và requestChildFocus được mô tả trong báo cáo. Tái hiện vấn đề bằng ví dụ App.ts được cung cấp trên trình giả lập AndroidTV hoặc Xiaomi MI BOX, bằng cách di chuyển giữa các hàng cuối cùng. Được xem là hoàn tất khi ScrollView luôn đi theo phần tử đang được focus khi di chuyển lên và xuống gần phía dưới.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- android, react-native
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100