是否需要使用StyleSheet.create?

时间:2016-10-07 01:13:56

标签: 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来定义样式,还是可以使用普通对象?

4 个答案:

答案 0 :(得分:10)

认为最好尽可能使用StyleSheet,因为它比使用常规对象更高效。

来自React Native Docs:

  

性能:

     
      
  • 从样式对象制作样式表可以通过ID引用它,而不是每次都创建一个新的样式对象。
  •   
  • 它还允许仅通过桥发送一次样式。所有后续用途都将引用一个id(尚未实现)。
  •   

请记住在某个地方看到某些内容(认为这是一个github问题)并提出类似的问题,有人说使用StyleSheet来提高性能仍然会更好。

希望这有帮助!

答案 1 :(得分:0)

不完全是你问题的答案,但是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的样式不属于对象。

  

TypeError:在此环境中,assign的源必须是一个对象......

enter image description here

答案 2 :(得分:-1)

除非@David指的是编译期间发生的事情,否则我相信这里的文档

  

从样式对象制作样式表可以引用   它通过ID而不是每次都创建一个新的样式对象。

指的是在您的代码中手动添加style={{ ... }}

通过简单地将样式对象导入任意组件文件,很容易避免重复使用样式对象,甚至跨文件。

就个人而言,我更喜欢使用普通对象,因此我可以编写样式对象,例如style={Object.assign({}, style1, { color })} StyleSheet

答案 3 :(得分:-2)

错误的方式是不同的。

使用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
  }
};