右边是React Native

时间:2017-11-05 17:58:33

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

尝试在renderRow中显示List项。 我已经在我的项目as defined on react native documentation中实施了RTL,我对console.log(I18nManager.isRTL ? 'yes' : 'no')获得了肯定 我试图呈现一个设计的表格单元格,所以它是一个图像,我正在尝试布置我的项目。 所以徽标的定义方式如下:

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

最困扰我的是它过去看起来还不错,而且我不确定这样做是什么引起的。

此外,&#34;正在加载&#34;应用程序启动时,文本显示在窗口右侧。

1 个答案:

答案 0 :(得分:1)

根据文档说:“我们将左侧/右侧样式从JS侧映射到开始/结束,RTL布局的代码中的所有内容在屏幕上变为”右侧“,并且代码中的所有内容在屏幕上变为”左侧“ “...你有没有考虑过用左手而不是右手来定位?或者,考虑使用flex-start或flex-end来获得所需的结果。