在react-native中我们使用styleSheet.create.我们在reactjs中使用了什么？

Question

在react-native中我们使用styleSheet.create.我们在reactjs中使用了什么？

谢谢您的帮助!

https://github.com/romseguy/redux-store-visualizer

我没有看到任何风格的使用,但有造型.他是如何实现这一点的,还是我错过了什么？

Answer 1

如果您在项目中使用 TypeScript，您可以像这样定义 StyleSheet：

interface StyleSheet {
  [key: string]: React.CSSProperties;
}

然后创建与 RN 的 StyleSheet.create 非常相似的样式。

const styles: StyleSheet = {
  navStyle: {
    listStyleType: 'none',
    margin: 0,
    padding: 0,
    display: 'flex',
    flexDirection: 'row',
    width: '100%'
  },
  anotherStyle: {
    ...
  }
}

Answer 2

类似的选择是做类似以下的事情:

let styles = {
  container: {
    backgroundColor: 'red'
  }
}

像上面提到的其中一条评论一样,StyleSheet调用是不必要的,因为浏览器上已经支持CSS了.

最后,只需在render函数的return语句中调用inline样式:

render() {
  ...
  return (
    <div style={styles.container} />
  )
}

当然,除此之外,您还有一些其他选项,例如使用纯CSS样式表和类/标签,但这可能是您习惯的最相似的选项.

Answer 3

我创建了从 React Native 到 React 的 StyleSheet.create({}) 的 TypeScript 实现。

import React from "react";

type CSSProperties = {
  [key:string]: React.CSSProperties;
};

export class StyleSheet {
  static create<Styles extends CSSProperties>(styles: Styles): Styles {
    return styles;
  };
};

用法：

创建一个包含 React CSS 属性的对象：

const styles = StyleSheet.create({
  main: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",

    height: "100vh",
  },

  loadingContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  },

  loadingText: {
    color: "#dcdcdc",

    fontSize: "1.125rem",
    fontWeight: 500,
  },
});

现在您知道该对象在 Reactjs 组件中使用时具有哪些属性：

看一下样本

要点：https://gist.github.com/Mitacho/fd7049db3dad80d9500851d81ce3153f