react / react/react-native

TextInput with TextAlign on iOS does not add ellipsis instead wraps

未關閉
#29,068 37 則留言 33 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

Component: TextInput Needs: Attention Needs: Environment Info Platform: iOS
主要語言
C++
星號
127k
分支
25.3k
平均合併
1 天 23 小時
30 天內合併 PR
4

描述

import React, { PureComponent } from 'react';
import {Text, TextInput, View} from 'react-native';

const App = () => {
  return (
    <View style={{flex: 1, justifyContent: 'center'}}>
      <View>
        <Text>Text Input without alignment</Text>
        <TextInput style={{padding: 10, margin: 20, borderColor: 'grey', borderWidth: 1}}/>
        <Text>Text Input with right alignment</Text>
        <TextInput textAlign={'right'} style={{padding: 10, margin: 20, borderColor:  'grey', borderWidth: 1}}/>
      </View>
      <TextInput/>
    </View>);
};

export default App;

Write some long text into the first field with spaces.
image

Write similar text into the second field.
image

Unfocus second input
Expected: both fields will have ellipsis at the end
Actual: second input with textAlign doesn't have ellipsis.

Android app works in a different way:
It never shows ellipsis but if you type a long string it always shows the end of it and never beginning. I guess it should move to begin when unfocused.

react: 16.11.0 => 16.11.0
react-native: 0.62.1 => 0.62.1

貢獻指南

開啟貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

研究方向

首先使用提供的 React Native App 範例重現問題,重點關注 TextInput 入口,並比較未取得焦點的欄位在有和沒有 textAlign 時的行為。檢查 iOS 和 Android 上的 TextInput 對較長、以空格分隔文字的行為。當對齊後的輸入欄位在 iOS 上依規格處理溢位,且平台行為獲得釐清或由回歸測試涵蓋時,即視為完成。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
android, ios, react-native
領域
mobile
Issue 類型
缺陷
難度
4/5
預估耗時
3-5 天
活躍度
冷清
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。