Question

Ni，我在我的本机应用程序中使用了React组件。除了样式外，它过渡到了本机的罚款。这是呈现组件的方式：

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

在网络中运行时，它使用以下样式表： 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

首先，您需要通过添加styles.js

在export default中导出样式。

现在，您可以将其导入到排行榜组件中，直接导入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}
/>

如何全局导入反应本机样式类

1 个答案: