尝试在 renderRow 中显示列表项。
我已经在我的元素中实现了 RTL as defined on react native documentation ,并且我对 console.log(I18nManager.isRTL ? 'yes' : 'no')
表示肯定。
我正在尝试展示一个设计好的表格单元格,所以它是一个图像,我正在尝试在其上布置我的元素。
所以 Logo 的定义样式如下:
var styles = StyleSheet.create({
logo:{
position: 'absolute',
top:11,
right:11,
width: 26,
height: 26
}
frame: {
flex: 1,
flexDirection: 'row',
margin: 5,
},
txtFirstName:{
position:'absolute',
top:7,
right:40,
marginRight:36,
color:'white',
fontSize:PixelRatio.get()*4/PixelRatio.getFontScale(),
fontWeight:'bold',
textAlign:'right',
textShadowColor: 'black',
textShadowOffset: {width:2,height:2},
writingDirection : 'rtl'
},
txtSecondName:{
position:'absolute',
top:17,
right:40,
marginRight:36,
color:'white',
fontSize:PixelRatio.get()*3/PixelRatio.getFontScale(),
fontWeight:'bold',
textAlign:'right',
textShadowColor: 'black',
textShadowOffset: {width:2,height:2},
writingDirection : 'rtl'
},
txtMainText:{
position:'absolute',
marginRight:36,
color:'white',
fontWeight:'bold',
textAlign:'right',
textShadowColor: 'black',
textShadowOffset: {width:2,height:2},
writingDirection : 'rtl',
fontSize:PixelRatio.getPixelSizeForLayoutSize(3),
},
});
renderRow(rowData, sectionID, rowID) {
return(
<TouchableOpacity onPress={()=>this.showBusiness(rowData)}>
<View style={{flex:1}}>
<Image style={styles.logo} resizeMode = 'cover' source=}require('../images/logo.png’){/>
<Image source={require('../images/mainFrame.png’){ style={styles.frame}/>
<Text style={[styles.txtMainText,styles.txtFirstName]}>
טקסט
</Text>
<Text style={[styles.txtMainText,styles.txtSecondName]}>
מיושר לימין
</Text>
</View>
</TouchableOpacity>
);
}
结果令人失望。
最让我困扰的是它以前看起来还不错,我不确定是什么让它变成这样。
此外,“正在加载”文本会在应用程序启动时显示在窗口右侧。
最佳答案
根据文档:“我们将 JS 端的左/右样式映射到开始/结束,RTL 布局代码中的所有左侧在屏幕上变为“右”,代码中的所有右侧在屏幕上变为“左” ”...您是否考虑过使用左而不是右进行定位?或者,考虑使用 flex-start 或 flex-end 以获得所需的结果。
关于android - React Native 上的 Right is Left,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47124778/