对React Native的RTL支持

时间:2019-01-16 14:45:36

标签: javascript reactjs react-native native

我正在使用React Native构建WordPress应用

我从'react-native'加载了应用程序import {I18nManager}的加载;

I18nManager.forceRTL(true);` 强制应用程序使用RTL,它对我有用,但是在细节上,即使使用

后,它仍然显示LTR
flexDirection: Constants.RTL ? 'row-reverse' : 'row'  ->  (for the label text)

这是我的postdetails styles.js代码,请帮助我找到此问题的解决方案

/** @format */

import { StyleSheet, Dimensions } from 'react-native'
import { Constants } from '@common'

const { width, height } = Dimensions.get('window')
const vw = width / 100
const vh = height / 100

export default StyleSheet.create({
  body: {
    flex: 1,
    backgroundColor: '#fff',
    width,
  },
  fill: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  card: {
    width,
    flexDirection: Constants.RTL ? 'row-reverse' : 'row',
  },
  box: {
    width: vw * 40,
    height: 100,
    backgroundColor: '#ccc',
    marginLeft: 20,
    marginTop: 10,
    marginBottom: 10,
  },
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    zIndex: 2,
    right: 0,
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
    overflow: 'hidden',
    height: Constants.Window.headerHeight,
  },
  linearGradient: {
    height: 50,
    zIndex: 3,
    width,
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
    position: 'absolute',
  },
  linearGradientBottom: {
    height: 50,
    bottom: 0,
    zIndex: 3,
    width,
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
    position: 'absolute',
  },
  headerIcon: {
    height: 40,
    position: 'absolute',
    top: 0,
    width,
    zIndex: 4,
  },
  image: {
    width: vw * 40,
    height: 90,
    resizeMode: 'cover',
    marginLeft: 8,
    marginTop: 20,
    marginBottom: 10,
  },
  content: {
    width: vw * 50,
    marginLeft: 14,
    marginTop: 20,
    marginBottom: 30,
  },
  greyRow: {
    backgroundColor: '#eee',
  },
  menuView: {
    backgroundColor: '#F4F4F4',
    height: 40,
  },
  menuItemView: {
    marginTop: 6,
    marginRight: 6,
    marginBottom: 6,
    marginLeft: 6,
    height: 28,
  },
  menuItem: {
    marginTop: 6,
    marginRight: 16,
    marginBottom: 6,
    marginLeft: 16,
    fontSize: 12,
    fontWeight: '500',
    color: '#8A939C',
  },
  menuItemActive: {
    backgroundColor: '#fff',
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#eee',
  },
  menuActiveText: {
    color: '#000',
  },
  bannerImage: {
    width,
    height: width / 2 + 40,
    backgroundColor: 'rgba(67, 130, 208, 0.2)',
  },
  placeHolderImage: {
    alignItems: 'center',
    width,
    height: width / 3,
    justifyContent: 'center',
    backgroundColor: 'rgba(67, 130, 208, 0.2)',
  },
  backgroundOne: {
    backgroundColor: 'rgba(58, 75, 133, 0.6)',
  },
  backgroundTwo: {
    backgroundColor: 'rgba(188, 59, 36, 0.6)',
  },
  backgroundThree: {
    backgroundColor: 'rgba(57, 174, 84, 0.6)',
  },
  bannerText: {
    position: 'absolute',
    bottom: 30,
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    width: vw * 60,
  },
  bannerTitle: {
    marginTop: 12,
    marginRight: 12,
    marginBottom: 2,
    marginLeft: 12,
    color: 'white',
    fontSize: 15,
  },
  bannerDate: {
    color: 'rgba(255, 255, 255, 0.7)',
    fontSize: 9,
    fontWeight: '500',
    marginLeft: 12,
    marginBottom: 12,
  },
  time: {
    color: '#999',
    fontSize: 12,
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
  },
  tagView: {
    flexDirection: Constants.RTL ? 'row-reverse' : 'row',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    marginBottom: 6,
  },
  tag: {
    backgroundColor: '#aaa',
    borderRadius: 12,
    alignSelf: 'flex-end',
    marginRight: 4,
  },
  tagText: {
    fontSize: 9,
    marginTop: 1,
    marginRight: 8,
    marginBottom: 1,
    marginLeft: 8,
    color: 'white',
    fontWeight: '600',
  },
  hlist: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: 0,
    paddingRight: 0,
    paddingBottom: 0,
    paddingLeft: 0,
  },
  color: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#EBEBEB',
  },
  title: {
    color: '#333',
    fontSize: 22,
    textAlign: 'center',
    fontWeight: '200',
    marginTop: 12,
  },
  titleSmall: {
    fontSize: 13,
    color: '#999',
    textAlign: 'center',
    marginBottom: 10,
    marginTop: 4,
  },
  productItem: {
    width: width - 30,
    height: 400,
    marginTop: 5,
    marginRight: 5,
    marginBottom: 5,
    marginLeft: 5,
  },
  detailBlock: {
    alignItems: 'center',
    backgroundColor: '#fff',
    paddingTop: 20,
    paddingRight: 20,
    paddingBottom: 20,
    paddingLeft: 20,
    width,
  },
  scrollView: {
    backgroundColor: '#fff',
    paddingTop: Constants.Window.headerHeight,
    paddingBottom: 200,
  },
  scrollViewContent: {
    position: 'relative',
    zIndex: 9,
    paddingBottom: 200,
  },
  innerContent: {
    backgroundColor: '#fff'
  },
  detailDesc: {
    color: '#333',
    width: width - 20,
    marginTop: 16,
    marginRight: 16,
    marginBottom: 2,
    marginLeft: 13,
    fontWeight: '500',
    fontSize: 22,
    textAlign: Constants.RTL ? 'right' : 'left',
  },
  largeImage: {
    width,
    height: width - 120,
    resizeMode: 'cover',
  },
  largeContent: {
    width,
    position: 'absolute',
    bottom: 0,
    height: 100,
  },
  largeTitle: {
    color: '#fff',
    fontSize: 18,
    paddingTop: 20,
    paddingRight: 20,
    paddingBottom: 0,
    paddingLeft: 20,
  },
  description: {
    backgroundColor: '#fff',
    flexDirection: Constants.RTL ? 'row-reverse' : 'row',
  },
  imageBackGround: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    width,
    height: Constants.Window.headerHeight
  },
  detailPanel: {
    height: 380,
    width,
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  toolbar: {
    backgroundColor: 'black',
  },
  shareIcon: {
    flexDirection: Constants.RTL ? 'row-reverse' : 'row',
    width: 100,
    position: 'absolute',
    right: 0,
    bottom: 16,
  },
  newsIcons: {
    color: '#999',
    marginLeft: 20,
  },
  newsTitle: {
    fontSize: 18,
    marginTop: 20,
    marginRight: 20,
    marginBottom: 20,
    marginLeft: 20,
    color: 'white',
    fontWeight: '400',
    textAlign: 'left',
    backgroundColor: 'transparent',
  },
  avatar: {
    width: 32,
    height: 32,
    borderRadius: 20,
    resizeMode: 'cover',
    marginTop: 12,
    marginRight: 12,
    marginBottom: 12,
    marginLeft: 12,
  },
  wrapComment: {
    paddingLeft: 15,
    paddingRight: 15,
    backgroundColor: '#F7F7F7',
    flex: 2 / 6,
  },
  headCommentText: {
    fontSize: 20,
    fontWeight: '600',
  },
  titleVideo: {
    flex: 1 / 6,
    paddingLeft: 15,
    paddingRight: 12,
  },
  titleVideoText: {
    fontSize: 18,
    color: 'rgb(11,6,6)',
    lineHeight: 22,
    fontWeight: 'bold',
  },
  countViews: {
    flex: 1 / 6,
    marginTop: 15,
    marginLeft: 15,
    marginBottom: 5,
  },
  countViewsText: {
    fontSize: 18,
    lineHeight: 18,
    color: 'rgb(149,149,149)',
  },
  wrapLikeShare: {
    flex: 1 / 6,
    marginTop: 5,
    marginRight: 10,
    marginBottom: 5,
    flexDirection: Constants.RTL ? 'row-reverse' : 'row',
    justifyContent: 'flex-end',
  },
  wrapLikeShareInner: {
    flexDirection: Constants.RTL ? 'row-reverse' : 'row',
  },
  icon: {
    flexDirection: Constants.RTL ? 'row-reverse' : 'row',
    marginRight: 10,
  },
  numberIcon: {
    marginLeft: 5,
    fontSize: 18,
  },
  author: {
    color: '#999',
    fontSize: 13,
    fontWeight: '600',
    marginTop: 12,
    marginRight: 12,
    marginBottom: 12,
    marginLeft: 12,
    textAlign: Constants.RTL ? 'right' : 'left',
  },
  relatedPostText: {
    fontSize: 16,
    fontWeight: 'bold',
    paddingTop: 10,
    paddingRight: 10,
    paddingBottom: 10,
    paddingLeft: 10,
  },
  shareIcons: {
    flexDirection: Constants.RTL ? 'row-reverse' : 'row',
    justifyContent: 'flex-end',
    position: 'absolute',
    width,
    right: 4,
    top: 8,
    zIndex: 10,
  },
  videoView: {
    backgroundColor: 'rgba(0,0,0, .8)',
    flex: 1,
  },
  video: {
    height: vh * 45,
    width,
    backgroundColor: '#000',
  },
  spinkitView: {
    backgroundColor: '#ffffff',
    flex: 1,
    height,
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

1 个答案:

答案 0 :(得分:-1)

您需要在forceRTL之后重新加载应用。请查看此链接enter link description here

但是我认为这不是一个好的解决方案。