Text inline Image in RTL layout, image position will be offset
Đang mở
Chưa có ai nhận issue này.
Component: Image
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
import {View, Text, Image, StyleSheet, I18nManager} from 'react-native';
const App = () => {
return (
<View style={styles.container} collapsable={true}>
<Text style={styles.text}>
هنا نص باللغة العربية
<Image
resizeMode="contain"
source={{uri: 'https://via.placeholder.com/20'}}
style={styles.image}
/>
مزود بصورة
</Text>
<View style={{flexDirection: 'row-reverse', alignItems: 'center'}}>
<Image
source={{uri: 'https://via.placeholder.com/20'}}
style={{width: 20, height: 20}}
/>
<Text style={{writingDirection: 'rtl'}}>هذا نص مع صورة</Text>
</View>
<Text style={styles.text}>
ehhehehehahehah
<Image
source={{uri: 'https://via.placeholder.com/20'}}
style={styles.image}
/>
ehhehehehahehah
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 16,
},
text: {
fontSize: 18,
writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
},
image: {
width: 20,
height: 20,
marginLeft: 5,
marginRight: 5,
},
});
export default App;
Steps to reproduce
yarn && yarn ios
React Native Version
0.74.2
Affected Platforms
Runtime - iOS
Output of npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 14.2.1
CPU: (8) arm64 Apple M2
Memory: 203.89 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.12.1
path: ~/.nvm/versions/node/v18.12.1/bin/node
Yarn:
version: 1.22.22
path: ~/.nvm/versions/node/v18.12.1/bin/yarn
npm:
version: 8.19.2
path: ~/.nvm/versions/node/v18.12.1/bin/npm
Watchman:
version: 2024.05.06.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.14.3
path: /Users/yw.hao/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.0
- iOS 17.0
- macOS 14.0
- tvOS 17.0
- watchOS 10.0
Android SDK: Not Found
IDEs:
Android Studio: 2024.1 AI-241.15989.150.2411.11948838
Xcode:
version: 15.0.1/15A507
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.9
path: /usr/bin/javac
Ruby:
version: 3.0.0
path: /Users/yw.hao/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.74.2
wanted: 0.74.2
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: false
Stacktrace or Logs
Layout question,No log.
Reproducer
no url.
Screenshots and Videos
No response
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- 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.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu bằng cách chạy ví dụ Text/Image nội tuyến được cung cấp trên iOS với yarn && yarn ios, đồng thời so sánh vị trí hình ảnh trong văn bản RTL và không phải RTL. Theo dõi đường đi bố cục văn bản và hình ảnh nội tuyến của iOS; hoàn thành khi hình ảnh không còn độ lệch được báo cáo, trong khi văn bản tiếng Ả Rập và Latinh xung quanh vẫn được định vị chính xác.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- ios, javascript, 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
- Cần làm rõ
- Mức phù hợp với người mới
- 30/100