Question

我从Rest Web Service获取样式类。

 try {
      var securityTokenInBean = {
        securityToken: authToken
      };
      fetchPost(
        "monitorprobe/getAllMonitoringProbe",
        "POST",
        securityTokenInBean,
        json => {
          this.setState({
            isLoading: false,
            sumUp: json.sumUp,
            styleClass : json.styleClass
          });
          this.state.isLoading = false;
        },
        err => {
          console.log("needToCallBack: api call failed." + err);
          //error(this.props.navigation,'error in needToCallBack ws call');
        }
      );
    } catch (error) {
      console.log("needToCallBack: api call failed." + error);
    }

我需要在View组件中使用样式类。 styleClass的值可以是criticalProbe，issueProbe，warningProbe，expiredProbe或okProbe

我已经为我的StyleSheet中定义的所有类别定义了样式。

const styles = StyleSheet.create({

criticalProbe : {
  backgroundColor: 'black',

},

issueProbe : {
  backgroundColor: 'red',

},
warningProbe : {
  backgroundColor: 'orange',

},

expiredProbe : {
  backgroundColor: 'yellow',
},

okProbe : {
  backgroundColor: 'green',

}

});

由于样式类是动态的，如何在我的View组件中使用来自rest服务的styleClass？

我尝试过

const criticalProbeStyleClass = styleClass.criticalProbeStyleClass;
console.log(criticalProbeStyleClass);//comes as okProbe
<View style={[styles.box, styles.criticalProbeStyleClass ]}>
            <Text style={styles.title}>Critical</Text>
            <Text style={styles.criticalProbeStyleClass}>{sumUp.totalCriticalProbe}</Text>
         </View>

但这不起作用。

为了验证我是否已尝试使用硬编码样式类，并且看起来还不错

<View style={[styles.box, styles.okProbe]}>
            <Text style={styles.title}>Critical</Text>
            <Text style={styles.criticalProbeStyleClass}>{sumUp.totalCriticalProbe}</Text>
         </View>

Answer 1

如果您的请求仅返回样式属性的名称；

创建一个文件，其中包含您想要的所有样式（例如， globalStyles.js ）并导出。在要使用的组件中导入它。然后，您可以使用如下所示的文件。

const styles = StyleSheet.create({
  criticalProbe : {
    backgroundColor: 'black',
  },
  issueProbe : {
    backgroundColor: 'red',
  },
  warningProbe : {
    backgroundColor: 'orange',
  },
  expiredProbe : {
    backgroundColor: 'yellow',
  },
  okProbe : {
    backgroundColor: 'green',
  }
});

export default styleClasses;

<View style={[styles.box, styleClasses[styleClass.criticalProbeStyleClass] ]}>
  <Text style={styles.title}>Critical</Text>
  <Text style={styles.criticalProbeStyleClass}>{sumUp.totalCriticalProbe}</Text>
</View>

如何在React Native中使用动态样式类

1 个答案: