Каков наиболее эффективный способ динамического моделирования в React-Native?
В React-Native вы можете использовать Таблица стилей для создания CSS-подобных таблиц стилей. Основная причина использования styleshee.create в пользу простых js-объектов - повышенная производительность. Тем не менее, вы часто можете захотеть динамически стилизовать компоненты, часто на основе их свойств. В основном я нашел три подхода к этому:
Обратите внимание на следующие примеры: Считайте, что const styles ... объявлен вне Компонента, так как это общий шаблон, и вы можете захотеть использовать стили между разными Компонентами. Считайте все, что находится ниже точек дерева, как часть функции рендеринга.
Используя массив стилей:
const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}}) ... return <View style = {[styles.viewStyle, {color: this.props.color}]} />Использование Stylesheet.flatten:
const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}}) ... const flattenedStyle = StyleSheet.flatten(styles.viewStyle, {{color: this.props.color}}) return <View style = {flattenedStyle} />Использование функции для создания таблицы стилей:
const styles = (color) => StyleSheet.create({ viewStyle: { backgroundColor:'red', color: color } }) ... const style = styles(this.props.color).viewStyle return <View style = {style} />
Мне интересно, какой подход является лучшим в отношении производительности, или есть ли другой, более производительный способ? Я думаю, что варианты 2 и 3 вообще никуда не годятся, потому что динамическое создание новых таблиц стилей при изменении свойств подрывает всю цель таблиц стилей. Рад любой мысли или намекам на эту тему!
К сожалению нет. В большинстве случаев я просто использую подход 1.
Я также думаю, что вариант два и три потребует времени и заставит ваш код расти в 5 раз быстрее, чем обычно, поэтому я рекомендую использовать первый вариант, потому что он простой, чистый и легкий для написания в 1000 раз!
Ответы 5
Вы можете запоминать создание таблицы стилей с помощью перехватчиков React, но сначала вам нужно выполнить некоторую проверку производительности, чтобы определить, действительно ли создание таблицы стилей требует оптимизации ЦП и / или памяти.
Вот пример:
const styles = (color) => StyleSheet.create({
viewStyle: {
backgroundColor:'red',
color: color
}
})
/*
even though makeStyle is defined in EVERY render,
React will only run it ONCE for any given props.color distinct value.
The resulting value `styles` survives re-renders
*/
const makeStyle = () => styles(props.color)
const styles = useMemo(makeStyle, [props.color]);
А вот и официальная документация.
Текущая реализация StyleSheet.create очень быстрая, и с useMemo все в порядке. Вопрос в том, стоит ли использовать мемоизацию (с не чистым дочерним компонентом) или вы можете просто создавать новый объект при каждом рендеринге.
Вы рассматривали CSS в библиотеках JS, таких как Styled components?
Вы можете передать реквизит и получить динамичный стиль, учитывая, что:
https://styled-components.com/docs/basics#passed-props
Невозможно представить, чтобы такая сложная библиотека обеспечивала наилучшую производительность. Конечно, лучший опыт разработчика, но вопрос не в этом.
Здесь вы можете выполнить динамическое моделирование в react native для каждого стиля.
Как это
<Text style = {styles.simpleText('red')}>Required field</Text>
// In styling
const styles = StyleSheet.create({
simpleText: (colorProp = 'black') => ({ // default black set
fontSize: 14,
color: colorProp,
})
})
и вы также можете передать любой тип данных для условного стиля
Возможно, это немного перебор для простого динамического стиля, но Reanimated очень производительный и будет запускать переход стиля со скоростью 60 кадров в секунду https://github.com/software-mansion/react-native-reanimated
Он архивирует это, заранее объявляя все стили, необходимые для анимации / перехода, и запускает их в собственном потоке, поэтому связь через мост JS-> Native кода минимальна.
На странице о них есть более подробное объяснение https://docs.swmansion.com/react-native-reanimated/docs/about
Один из подходов
// homeSreen
<View style = {styles.filterButton(isSelected)}>
<Text> Strawberry </Text>
</View>
// styles.js
import { StyleSheet } from 'react-native';
import { Colors } from '../../theme';
export default StyleSheet.create({
container: {
backgroundColor: Colors.lighter,
},
filterButton: isSelected => ({
padding: 15,
backgroundColor: isSelected? Colors.background.primary: Colors.background.secondary
}),
});
Вы нашли на это ответ?