React-Native中动态样式的最高性能方式是什么?

时间:2018-08-03 14:27:12

标签: performance react-native dynamic styles stylesheet

在React-Native中,您可以使用Stylesheet创建类似CSS的样式表。使用styleshee.create来支持普通js对象的主要原因是提高了性能。但是,您可能经常想根据组件的属性动态设置组件的样式。我基本上发现了执行此操作的三种方法:

以下示例的注释: 考虑将const styles ...声明在组件外部,因为它是一种常见模式,您可能需要在不同组件之间共享样式。将树点下方的所有内容都视为渲染功能的一部分。

  1. 使用样式数组:

    const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}})
    ...
    return <View style={[styles.viewStyle, {color: this.props.color}]} />
    
  2. 使用Stylesheet.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根本没有用,因为在prop-changes上动态创建新样式表会破坏样式表的整个目的。我很高兴对此主题有任何想法或提示!

5 个答案:

答案 0 :(得分:1)

其中一种方法

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

答案 1 :(得分:0)

您可以使用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]);

这是official documentation

答案 2 :(得分:0)

您是否考虑过在Styled components之类的JS库中使用CSS?

您可以传递道具并获得动态风格,如下:

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

答案 3 :(得分:0)

在这里,您可以在每种样式的本地本机中进行动态样式。

<Text style={styles.simpleText('red')}>Required field</Text>

// In styling
const styles = StyleSheet.create({
     simpleText: (colorProp = 'black') => ({ // default black set
           fontSize: 14,
           color: colorProp,
     })
})

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

答案 4 :(得分:0)

对于简单的动态样式而言,可能有些过大,但Reanimated的性能很高,并且将以60fps的速度运行样式转换https://github.com/software-mansion/react-native-reanimated

它通过提前声明动画/过渡所需的所有样式来对此进行存档,并在本机线程上运行它们,从而使JS->本机代码桥之间的通信最少。

https://docs.swmansion.com/react-native-reanimated/docs/about

上关于他们的页面有更好的解释