如何全局导入react-native样式类

Question

Ni，我在我的react原生应用中使用react组件。它过渡到了react-native fine，除了样式。下面是组件的呈现方式：

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

它在web中运行时使用以下样式表：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.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}
/>