反应本机样式不结合

时间:2020-05-01 08:43:13

标签: javascript react-native

我试图将fontSize作为样式属性传递给我的组件。 fontSize并没有改变我如何通过fontSize作为覆盖默认大小的道具的任何想法?

<Homemenu navigation={navigation} style={styles.homeMenu} />

const styles = StyleSheet.create({
....
  homeMenu: {
    fontSize: 16,
  },
});

在我的主菜单中:

      render() {
            let {style, navigation} = this.props;
            let fontSize = style && style.fontSize ? style.fontSize : null;

            return (
              <View style={styles.container}>
                  <View style={[styles.menuItem, fontSize]}>
                    ....
                  </View>
                const styles = StyleSheet.create({
    ...
        menuItem: {
        fontSize: 26
  },

    });

2 个答案:

答案 0 :(得分:0)

我想您不必为style道具中的虚假值而烦恼。我看不出为什么它不起作用的任何问题。代码对我来说看起来不错。

<Homemenu navigation={navigation} style={styles.homeMenu} />

const styles = StyleSheet.create({
  ...
  homeMenu: {
    fontSize: 16,
  },
});

render() {
  let { style, navigation } = this.props;

  return (
    <View style={styles.container}>
      <View style={[styles.menuItem, style]}>
        ....
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  ...
  menuItem: {
    fontSize: 26
  },
});

答案 1 :(得分:0)

您做对了,这是您需要做的唯一更改 <View style={[styles.menuItem, fontSize]}> 您是否应该更新现有的样式对象

style={{...styles.menuItem, fontSize}}

基本上,它应该是可迭代的,以便您的第二个值可以覆盖第一个值。而且我们不应该用方括号括起来,而应该使用花括号,因为它是对象。

相关问题