Как наследовать стиль в StyleSheet.create в React Native (возможно, с использованием синтаксиса деструктуризации) - PullRequest
Новая
       41

Как наследовать стиль в StyleSheet.create в React Native (возможно, с использованием синтаксиса деструктуризации)

0 голосов
/ 02 октября 2019

Я хочу повторно использовать стили в объекте параметра StyleSheet.create, как это сделать?

См. Код: 

const styles = StyleSheet.create({
  style1: {
    color: "red",
    backgroundColor: "white"
  },
  style2: {
    width: 100,
    ...style1
  }
})

Изначально яхотите style2 унаследовать все color и backgroundColor от style1 и расширить еще 1 свойство с именем width. Так что я попробовал приведенный выше код, но затем он получил ошибку «style1 не объявлен». Я понял проблему, поэтому я заменил ...style1 на ...this.style1, ошибка исчезла, но она не сработала, как я ожидал. Я удивился, почему и попытался запустить этот фрагмент в javascript, чтобы проверить поведение: 

styles = {
  style1: {
    color: "red",
    backgroundColor: "white"
  },
  style2: {
    width: 100,
    inherit: this.style1
  }
}
console.log(styles.style2.inherit)

Получен результат undefined, который не равен styles.style1. Я снова осознал проблему, и после замены inherit: this.style1 на inherit: styles.style1 фрагмент кода javascript работает, но не в коде React Native.

Я думаю доТеперь вы понимаете, чего я хочу, поэтому мой вопрос заключается в том, как мне этого добиться (повторно использовать стиль кода в React Native)? Я думаю, что будет много обходных путей, поэтому, пожалуйста, дайте мне столько, сколько сможете. Спасибо.

Вот список синтаксисов, которые я пробовал, но не получил ожидаемого результата (или, поскольку мой мозг не работает хорошо, я ошибся): 

...style1
...this.style1
...styles.style1
...StyleSheet.style1
...StyleSheet.flatten(styles.style1)

Ответы [ 2 ]

1 голос
/ 02 октября 2019

Невозможно Самостоятельные ссылки в литералах / инициализаторах объекта

Решение: 1 

const baseStyle = {
    color: "red",
    backgroundColor: "white"
};


const styles = StyleSheet.create({
       style1: baseStyle,
       style2: {
           width: 100,
           ...baseStyle
      }
    });

Решение 2 Использовать Стилизованные компоненты длялегко управляйте и повторно используйте стили.

0 голосов
/ 02 октября 2019

Я знаю, что один из обходных путей - поместить «многократно используемый» объект style1 вне StyleSheet.create: 

const style1 = {
  color: "red",
  backgroundColor: "white"
}
const styles = StyleSheet.create({
  style2: {
    width: 100,
    ...style1
  }
})

Есть ли лучший способ? Поскольку style1 также может быть стилем, используемым другим элементом, я не могу больше использовать <Element style={styles.style1}/> ...

...