react / react/react-native

Components inside the Text wont follow the width of the Text when screen Orientation is changed

Đang mở
#31,171 3 bình luận 0 reaction 0 người được giao Xem trên GitHub

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

Component: Text Issue: Author Provided Repro
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

So I implement AdMobBanner and then decided to place is inside the Text component.
Why I did that, Well I have AdMobBanner inside TouchableOpacity component and if I do not place it inside the Text, the user wont be able to click on it.

Now this is not the problem, the problem is that when the screen Orientation is changed the component inside the Text wont follow for some reason.

React Native version:

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-3820 CPU @ 3.60GHz
    Memory: 1.13 GB / 7.92 GB
  Binaries:
    Node: 15.6.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.11 - D:\Projects\NovelManager\node_modules\.bin\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 26, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.3
      System Images: android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.7.30517.126 (Visual Studio Enterprise 2019)
  Languages:
    Java: 11.0.10 - C:\Program Files\AdoptOpenJDK\jdk-11.0.10.9-hotspot\bin\javac.EXE
    Python: 3.9.1 - C:\Python39\python.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: ~16.13.1 => 16.13.1
    react-native: ^0.63.4 => 0.63.4
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

I have create a demo that represent the problem here on snack
To test this you will have to view it on your phone.

This is the code you should look into when you navigate snack

               <Text key={attr["index"]} style={{maxWidth:"100%",minWidth:"100%", backgroundColor:"red", justifyContent:"center"}} onPress={e=> {e.preventDefault() }}>
                      <Banner bannerSize="smartBannerPortrait"
                      />
                    </Text>

Expected Results

The Text component should behave like View and when the screen Orientation is changed its children should also follow the Text component style

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/@alentoma/banner

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

Mở Snack được liên kết và tái hiện sự cố trên điện thoại bằng cách thay đổi hướng. Bắt đầu với component Text chứa Banner và so sánh chiều rộng của nó với hành vi mong đợi; được xem là hoàn tất khi Banner được nhúng tuân theo chiều rộng của Text sau các lần thay đổi hướng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
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
30/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.