React Native中动态造型最具性能的方式是什么

Question

在React Native中，您可以使用样式表创建类似css的样式表。使用styleshee.create支持纯js对象的主要原因是提高了性能。但是，您可能经常希望动态地设置组件样式，通常是基于它们的道具。我基本上找到了三种方法：

注意以下示例： 考虑在组件外部声明const styles ...，因为这是一种常见模式，您可能希望在不同的组件之间共享样式。将树点下方的所有内容视为渲染函数的一部分

1. 使用样式数组：

   const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}})
   ...
   return <View style={[styles.viewStyle, {color: this.props.color}]} />
   

2. 使用样式表.flatten:

   const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}})
   ...
   const flattenedStyle = StyleSheet.flatten(styles.viewStyle, {{color: this.props.color}})
   return <View style={flattenedStyle} />
   

3. 使用函数创建样式表：

   const styles = (color) => StyleSheet.create({
   viewStyle: {
   backgroundColor:'red',
   color: color
   }
   })
   ...
   const style = styles(this.props.color).viewStyle
   return <View style={style} />
   

我想知道哪种方法对性能最好，或者是否还有其他更具性能的方法？我认为选项2和3根本不可行，因为在道具更改时动态创建新的样式表会破坏样式表的全部目的。我很乐意对这个问题有任何想法或暗示！

Answer 1

在这里，您可以在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,
})
})

您还可以为条件样式传递任何数据类型

Answer 2

方法之一

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

Answer 3

您可以使用React挂钩来记忆样式表的创建，但首先您需要进行一些性能检查，以确定样式表创建是否真的是值得优化的CPU和/或内存占用。

这里有一个例子：

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]);

这是官方文件。

Answer 4

您是否考虑过Styled components等JS库中的CSS？

你可以通过道具并获得动态风格方面：

https://styled-components.com/docs/basics#passed-道具

Answer 5

对于简单的动态样式可能有点过头了，但Reanimated的性能非常好，将以60fps的速度运行样式转换https://github.com/software-mansion/react-native-reanimated

它通过提前声明动画/转换所需的所有样式来归档这一点，并在本机线程上运行它们，因此JS之间的通信量最小；本机代码桥。

在他们的"关于"页面上有更好的解释https://docs.swmansion.com/react-native-reanimated/docs/about