React Native - 动态更改样式表

Question

我用需要 rtl 支持的 recl 原生(英语和阿拉伯语(编写项目。但是，我正在尝试自己的代码，而不是使用 rtl 插件。直截了当地说，我想知道我是否有可能动态更改样式表，以便所有类在哪里：位置：绝对。如果它有一个属性左或右，反转它？

例如，如果一个类是绝对定位的，并且具有：左：20，

我可以自动将其变成：右：20，

反过来也一样？这在反应本机中可能吗？

Answer 1

是的，你可以做类似的事情

const styles = StyleSheet.create({
  yourView: {
    left: isRight ? 0 : 20,
    right: isRight? 20: 0,
  },
});

其中 isRight 是您之前定义的变量

另一种方法是创建以将其分离为不同的样式，并在渲染时附加样式。类似的东西

const styles = StyleSheet.create({
  yourView: {
    ...common styles here
  },
  leftView: {
    left: 20,
  },
  rightView: {
    right: 0,
  },
});

然后在渲染方法中，您将样式附加为：

render() {
  return (
    <View styles={[styles.mainView, isRight ? styles.leftView : styles.rightView]}/>
  )
}