如何在 StyleSheet 中访问我的状态变量？

Question

我根据我在应用程序中显示的图像计算各种边距，每次选择图像时，它们的像素宽度范围都不同，所以我需要我们非常动态。计算完边距宽度后，我将它们保存在状态变量 marginL 和 marginR 中。

但是我似乎无法在 StyleSheet 中访问这些，我只是收到一条错误消息，说 marginLeft 未定义。

const styles = StyleSheet.create({
    container: {
      flex: 1, 
    },
    gap: {
      flex: 0.5,
      marginLeft: this.state.marginL,
      marginRight: this.state.marginR
    }
})

如何访问我的变量？

Answer 1

我不确定StyleSheet 值的动态变化。但是当您计算边距宽度时，您可以覆盖您的样式，如下所示

<View style={[styles.gap, {marginLeft: this.state.marginL, marginRight: this.state.marginR}]} />

查看完整示例

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";

export default class App extends Component {
  state = {
    marginL: 10,
    marginR: 20
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={[ styles.gap, { marginLeft: this.state.marginL, marginRight: this.state.marginR }]} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "red"
  },
  gap: {
    flex: 0.5,
    marginLeft: 0,
    marginRight: 0,
    backgroundColor: "green"
  }
});

这不是最佳解决方案，但希望对您有所帮助。欢迎提出疑问。