android - React Native 上的 Right is Left

标签 android css react-native flexbox react-native-flexbox

尝试在 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>
  );
  }

结果令人失望。

下面是它应该的样子: enter image description here

现在是这样的: enter image description here

最让我困扰的是它以前看起来还不错,我不确定是什么让它变成这样。

此外,“正在加载”文本会在应用程序启动时显示在窗口右侧。

最佳答案

根据文档:“我们将 JS 端的左/右样式映射到开始/结束,RTL 布局代码中的所有左侧在屏幕上变为“右”,代码中的所有右侧在屏幕上变为“左” ”...您是否考虑过使用左而不是右进行定位?或者,考虑使用 flex-start 或 flex-end 以获得所需的结果。

关于android - React Native 上的 Right is Left,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47124778/

相关文章:

安卓 : how to get YOUR_AUTHENTICATION_ENDPOINT for SSO on GMAIL?

android - SurfaceHolder 回调如何与 Activity 生命周期相关?

javascript - 使内部阵列与外部阵列不同

javascript - 尝试在 for 循环 jquery 中使用 inner.HTML 生成一个 div

javascript - 由于导航重置,ComponentDidMount 调用两次

ios - React-native iOS 构建失败

Android MVP - 在 View 实现( fragment 或 Activity )中调用 View 方法

Android NDK 字符数组初始化超过 1Mb

css - 一些 Fontawesome 图标在 Safari 中不显示

react-native - React Native将状态中的数组值用作Picker项目