Есть ли необходимость использовать StyleSheet.create?

ProgramBox

Есть ли необходимость использовать StyleSheet.create?

Post author:admin
Запись опубликована:10 февраля, 2023
Post category:Вопросы по программированию

#react-native

Вопрос:

Я определяю стили таким образом:

 const styles = StyleSheet.create({
    container: {},
    tabContent: {
        alignItems: "flex-start",
        flexDirection: "column",
        padding: 21
    },
    tabHeader: {
        flex: 0,
        fontSize: 10,
        paddingTop: 10,
    },
    tabText: {
        flex: 0,
        fontSize: 14,
        paddingTop: 10,
        textAlign: "left"
    },
})

Однако однажды я забыл использовать StyleSheet.create и использовал обычный объект:

 const styles = {
    container: {},
    tabContent: {
        alignItems: "flex-start",
        flexDirection: "column",
        padding: 21
    },
    tabHeader: {
        flex: 0,
        fontSize: 20,
        paddingTop: 10,
    },
    tabText: {
        flex: 0,
        fontSize: 14,
        paddingTop: 10,
        textAlign: "left"
    },
}

На удивление, это сработало.
Нужно ли использовать StyleSheet.create для определения стилей или можно использовать простые объекты?

Ответ №1:

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

Из React Native Docs:

Производительность:

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

Это также позволяет отправлять стиль только один раз через мост. Все последующие использования будут ссылаться на идентификатор (еще не реализован).

Помните, что вы где-то видели что-то (думаю, это была проблема с github) с аналогичным вопросом, и кто-то сказал, что его все равно лучше использовать StyleSheet для повышения производительности.

Надеюсь, это поможет!

1. Я также заметил, что обычные объекты не будут выдавать ошибки. Если вы выполняете { cursor: ‘pointer’ } , в обычном объекте ошибка не выдается. Если вы делаете это в StyleSheet, он выдает ошибку.

2. Обратите внимание, что если вы пытаетесь самостоятельно прочитать объект стиля, вам нужно сначала использовать flatten() , если он был создан StyleSheet.create() . Это сводит на нет преимущество в производительности и должно использоваться только там, где это необходимо.

3. Дэвид, вероятно, мог бы повысить свой уровень уверенности, выраженный в его ответе; это совершенно правильно. StyleSheet.create() это чисто оптимизация производительности, которая, безусловно, имеет значение.

Ответ №2:

Не совсем ответ на ваш вопрос, но FWIW

Разница есть. Вы не можете объединять (распространять или назначать) стили из StyleSheet.create -за react-native бросков.

Похоже StyleSheet.create , возвращает что угодно, но не объект JS. Если вы попытаетесь объединить два стиля из StyleSheet.create , react-native вы получите RebBox.

Пример:

 const css = StyleSheet.create( {
   btn: { color: 'blue' },
   mb10: { marginBottom: 10 }
} )

render() {
    // I want to concat styles using spread or assign
    let btnClass = { ...css.btn, ...css.mb10 }; // spread
    let btnClass = Object.assign({},css.btn, css.mb10); // plain'ol assign

    return (
        <Button style={btnClass} />
    )
}

Но react-native внезапно бросает TypeError . Стили из StyleSheet.create по какой-то причине не являются объектами.

Ошибка типа: в этой среде источниками для assign ДОЛЖЕН быть объект…

Ответ №3:

Если @David не ссылается на что-то, что происходит во время компиляции, я полагаю, что документация здесь

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

имеется в виду добавление тегов вручную style={{ ... }} .

Довольно легко избежать повторного использования объектов стиля, даже в файлах, просто импортируя объекты стиля в произвольные файлы компонентов.

Лично я предпочитаю использовать простые объекты, чтобы я мог создавать объекты стиля, например style={Object.assign({}, style1, { color })} , то, что вы не можете сделать с StyleSheet

Ответ №4:

Неправильный способ отличается.

Используйте StyleSheet.create , вы получите сообщение об ошибке красного экрана:

 const styles = StyleSheet.create({
  container: {
    flexDirection:"row",
    alignItems:"center",
    fontSize:"20",//error
 }
});

Бесполезно StyleSheet.create , вы получите предупреждение:

 const styles = {
  container: {
    flexDirection: "row",
    alignItems: "center",
    fontSize: "20", //error
  }
};