Question

import React from 'react';
import { View, Text } from 'react-native';

let globalIsTotal =false;
const component = ({ isTotal }) => {
  const { mainLabelStyle } = styles;

  globalIsTotal = isTotal;
  return (
    <View>
      <Text style={mainLabelStyle}>Hello World</Text>
    </View>
  );
};

const styles = {
  mainLabelStyle: {
    fontSize:28,
    flex: 1,
    fontWeight: () => {
      if(globalIsTotal===true){
        return 'bold';
      }
      return 'normal';
    }
  }
}

我正在尝试根据fontWeight值设置样式的globalIsTotal，但似乎函数没有被触发。想知道这是否是处理这种样式逻辑的正确方法？这是一个可重用的功能组件，并且isTotal从调用者传递道具

Answer 1

您应该使用三元表达式来触发对象中的条件，例如：

mainLabelStyle: {
  fontSize:28,
  flex: 1,
  fontWeight: globalIsTotal ? 'bold' : 'normal'
}

Answer 2

我会这样做：

从样式对象中删除fontWeight

const styles = {
  mainLabelStyle: {
    fontSize:28,
    flex: 1
  }
}

然后像这样添加：

<Text style={[mainLabelStyle, { fontWeight: globalIsTotal ? 'bold' : 'normal'}]}>Hello World</Text>

Answer 3

以下是关于您的问题的选项：

let globalIsTotal =false;
const component = ({ isTotal }) => {
  const { mainLabelStyle } = styles;

  globalIsTotal = isTotal;
  return (
    <View>
      <Text style={globalIsTotal==true ? [styles.mainLabelStyleBold] : [styles.mainLabelStyleNormal]}>Hello World</Text>
    </View>
  );
};

const styles = {
  mainLabelStyleNormal: {
    fontSize:28,
    flex: 1,
    fontWeight: 'normal'
  }
  mainLabelStyleBold: {
    fontSize:28,
    flex: 1,
    fontWeight: 'bold'
  }
}

如何在Style对象中触发函数？

3 个答案: