【RN v0.71.10】Text doesn't show all content on Android(some devices)
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- C++
- Sterne
- 127k
- Forks
- 25.3k
- Ø Merge
- 1 T. 23 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
Description
Init a new project, just add Text component to show some texts on Android. The Text doesn't show all content for Japanese with custom font fontFamily--BarlowCondensed-Regular on Android(some devices only) such as OPPO K9x 5G.
React Native Version
0.71.10
Output of npx react-native info
➜ newrnversion npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 12.5
CPU: (8) arm64 Apple M2
Memory: 86.42 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 19.6.0 - /opt/homebrew/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.4.0 - /opt/homebrew/bin/npm
Watchman: 2023.02.06.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.17 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.10 => 0.71.10
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps to reproduce
- Init a new project using
npx react-native init newrnversion. - Create a font directory
assets/fontsinsidenewrnversion/android/app/src/main. - Add a custom font
BarlowCondensed-Regularfile tonewrnversion/android/app/src/main/assets/fonts. - Edit
App.tsxfile, adds aTextcomponent with Japanese. - Sets the
fontFamilyasBarlowCondensed-Regular. - Run android only.
- The content in
Textdoes not show incomplete.
Snack, code example, screenshot, or link to a repository
Codes
import React from "react";
import { Text, View } from "react-native";
import { Header } from "react-native/Libraries/NewAppScreen";
function App(): JSX.Element {
return (
<View>
<Header />
<Text style={{
fontSize: 16,
backgroundColor: "red",
marginTop: 200,
alignSelf: "center",
textAlign: 'center',
fontFamily: "BarlowCondensed-Regular"
}}>
番号を変更
</Text>
</View>
);
}
export default App;
Screenshot
Actual behaviour
The text does not align center and the content shows incomplete. It seems that it's cut off and moves down!
Expected behaviour
The text aligns center and the content shows complete. For example:
However, if I sets lineHeight: 20 like
<Text style={{
fontSize: 16,
backgroundColor: "red",
marginTop: 200,
alignSelf: "center",
textAlign: 'center',
fontFamily: "BarlowCondensed-Regular",
lineHeight: 20, // here!
}}>
番号を変更
</Text>
Everything works well on all devices! But I think we shouldn't always set lineHeight to avoid this problem. It should be a bug on Android. Any ideas or how to fix it using a efficient way?
At last, the font file(BarlowCondensed-Regular) can be downloaded via the link: BarlowCondensed-Regular.
Any help will be appreciated.
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne damit, das Problem aus App.tsx mit der Schriftart in android/app/src/main/assets/fonts auf einem betroffenen Android-Gerät wie dem OPPO K9x 5G zu reproduzieren. Vergleiche die Darstellung von Japanese Text mit und ohne lineHeight: Die Arbeit ist abgeschlossen, wenn der Inhalt vollständig sichtbar und zentriert ist, ohne lineHeight zu benötigen.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- android, react-native
- Bereich
- mobile-dev
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100