如何全局导入react-native风格类

Question

Ni，我在我的 react-native 应用程序中使用了一个 react 组件。它过渡到 react-native 很好，除了样式。这是组件的渲染方式：

<Leaderboard
    data={this.state.sampleData}
    votes="score"
    artistName="artist"
    songTitle="name"
    albumCover="image"
    id="id"
/>

它在网页中运行时使用以下样式 sheet： import "react-h5-audio-player/lib/styles.css";

不幸的是，react-native 不接受 .css 文件。所以我创建了以下 styles.js 文件：

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  rhap_container: {
    boxSizing: "border-box",
    display: "flex",
    flexDirection: "column",
    lineHeight: "1",
    fontFamily: "inherit",
    width: "100%",
    padding: "10px 15px",
    backgroundColor: "#fff",
    boxShadow: "0 0 3px 0 rgba(0, 0, 0, 0.2)",
  },
  rhap_container_focus_not__focus_visible: {
    outline: "0",
  },
  rhap_container_svg: {
    verticalAlign: "initial",
  },
  rhap_header: {
    marginBottom: "10px",
  },...

我现在被困住了：如何导入这个新样式对象，以便它应用于排行榜？

Answer 1

首先您需要通过添加 export default

在 styles.js 中导出您的样式

现在您可以将其导入 Leaderboard 组件，直接导入 Leaderboard.js 或将样式传递给它的道具，如下所示：

import styles from "./styles.js";

<Leaderboard
    data={this.state.sampleData}
    votes="score"
    artistName="artist"
    songTitle="name"
    albumCover="image"
    id="id"
    style={styles.rhap_container} // or you could pass all styles styles={styles}
/>

如何全局导入react-native风格类

How to globally import react-native style classes

css

react-native

react-native-ios