Реагировать на родные стили, не сочетая

Question

Я пытаюсь передать fontSize как свойство стиля моему компоненту. fontSize не меняет представления о том, как я могу передать fontSize в качестве реквизита для перезаписи размера по умолчанию?

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

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

В моем homeMenu:

      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
  },

    });

Answer 1

Вы делаете это правильно, единственное изменение, которое вам нужно внести в <View style={[styles.menuItem, fontSize]}>, - это обновить существующий объект стиля

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

По сути, он должен быть повторяемым, чтобы ваше второе значение могло переопределить первый. И мы не должны заключать его в квадратные скобки, и мы должны использовать фигурные скобки, так как это объект.

Answer 2

Полагаю, вам не нужно беспокоиться о ложных значениях в style prop. Я не вижу проблемы, почему это не должно работать. Код выглядит хорошо для меня.

<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
  },
});