TextInput onContentSizeChange returns incorrect layout size instead of content size on Android
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ả
Description
The onContentSizeChange prop of the TextInput component does not work on Android as it does on iOS. On Android it seems to be returning the layout height and width of the TextInput view, rather than the height and width of the text.
This same issue has been reported before in https://github.com/facebook/react-native/issues/25487 and https://github.com/facebook/react-native/issues/19696, but does not seem to have been fixed
React Native version:
System:
OS: macOS 10.15.6
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 71.45 MB / 32.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /Users/travisnuttall/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 30.0.1
System Images: android-30 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6626763
Xcode: 11.6/11E708 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_242-release - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.2 => 0.63.2
npmGlobalPackages:
react-native: Not Found
Steps To Reproduce
Run the following code on both iOS and Android platforms, note the inconsistency in the logged values from `contentSize:
import React from 'react';
import { View, TextInput } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1, marginTop: 40 }}>
<TextInput
defaultValue="test"
onLayout={ e=> {
console.warn("single line layout", e.nativeEvent.layout)
}}
style={{ width: 200, lineHeight: 30, backgroundColor: '#CCC' }}
onContentSizeChange={ e=> {
console.warn(e.nativeEvent.contentSize)
}}
/>
<TextInput
defaultValue="test"
onLayout={ e=> {
console.warn(e.nativeEvent.layout)
}}
multiline
style={{ width: 200, lineHeight: 30, backgroundColor: '#CCC' }}
onContentSizeChange={ e=> {
console.warn(e.nativeEvent.contentSize)
}}
/>
</View>
)
}
}
Expected Results
On iOS as you edit text on single or multiline TextInput you get the actual width of the characters entered. I would expect the same behavior on Android. Effectively this functionality is not actually implemented on Android at the moment.
Snack, code example, screenshot, or link to a repository:
See code sample in reproducible steps
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 việc xử lý onContentSizeChange trên Android của component TextInput và tái hiện ví dụ single-line và multiline được cung cấp, so sánh contentSize với onLayout trên cả hai nền tảng. Hoàn thành khi Android báo cáo kích thước văn bản nhất quán với iOS trong cả hai trường hợp; issue không nêu file hoặc test cụ thể nào.
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, javascript, 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