react / react/react-native

TextInput onContentSizeChange returns incorrect layout size instead of content size on Android

未关闭
#29,702 26 条评论 20 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Component: TextInput Needs: Triage :mag: Never gets stale Platform: Android
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
4

描述

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

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

从 TextInput 组件在 Android 上对 onContentSizeChange 的处理入手,复现提供的单行和多行示例,并在两个平台上比较 contentSize 与 onLayout。当 Android 在两种情况下报告的文本尺寸都与 iOS 一致时,即表示完成;该 issue 未指定任何特定文件或测试。

由索引模型根据 Issue 内容生成。

评估

技术栈
android, javascript, react-native
领域
mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。