react / react/react-native

[Text on Android]: setting selectable to true breaks the text truncation and lineHeight on Android

Đang mở
#48,921 25 bình luận 5 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Needs: Triage :mag: Platform: Android
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

I use Text component that has to contain selectable text and should be truncated if it extends the width of the parent component.
On iOS everything works fine. On Android if I set selectable={true} truncation and line height of the text are breaking.

Steps to reproduce
  1. import Text component from react-native
  2. render Text component, add selectable={true}, numberOfLines={1}
  3. the text is cut off instead of being truncated, the line height is bigger than it should be, the top of the second line of text is visible
React Native Version

0.75.4

Affected Platforms

Runtime - Android

Output of npx react-native info
-
Stacktrace or Logs
-
Reproducer

https://github.com/dariakoko/text-component-on-android

Screenshots and Videos
Image
      <View style={{width: 200}}>
        <Text style={{color: 'green'}}>default: </Text>
        <Text style={{backgroundColor: 'yellow'}}>
          Some long very very very very very long text
        </Text>

        <Text>-------------</Text>

        <Text style={{color: 'green'}}>not selectable: </Text>
        <Text numberOfLines={1} style={{backgroundColor: 'yellow'}}>
          Some long very very very very very long text
        </Text>

        <Text>-------------</Text>

        <Text style={{color: 'red'}}>selectable (issue): </Text>
        <Text
          selectable={true}
          numberOfLines={1}
          style={{backgroundColor: 'yellow'}}>
          Some long very very very very very long text
        </Text>
        <View style={{height: 20, backgroundColor: 'pink'}}></View>
      </View>

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. 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.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu với reproducer được liên kết tại https://github.com/dariakoko/text-component-on-android và kiểm tra hành vi của component Text của React Native trên Android với selectable={true} và numberOfLines={1}. So sánh với các trường hợp không cho phép chọn và iOS; công việc được xem là hoàn tất khi văn bản có thể chọn được cắt ngắn chính xác và giữ nguyên chiều cao dòng mong đợi trên Android.

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-dev
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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.