如何为我的React原生项目添加外部样式表

fdbelqdn  于 2023-02-09  发布在  React
关注(0)|答案(2)|浏览(105)

如何为我的React本机项目添加外部样式表

添加外部样式表

u4vypkhs

u4vypkhs1#

首先,必须创建一个文件以导出带有样式的StyleSheet对象。

样式.js

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({

box: {
    width: '80%',
    height: 150,
    backgroundColor: 'red',
    alignSelf: 'center',
    borderRadius: 9
  }
   
});

export { styles }

在您的组件中,您必须导入它。

import React, { Component } from "react";
import { View } from 'react-native';
import { styles } from "./Style";

class Home extends Component {
    render(){
        return(
            <View>
                <View style={styles.box}>

                </View>
            </View>
        )
    }
}

export default Home;

最后,运行应用程序。

doinxwow

doinxwow2#

如果我没理解错的话,您希望向组件添加样式。
我假设您使用的是功能组件。
一个好的做法是在组件所在的同一文件夹中创建一个style.js文件。

    • 样式. js**
import { StyleSheet } from 'react-native';
    const styles = StyleSheet.create({
      container: {
        width: '100%',
        height: '100%',
        backgroundColor: 'green'    
     }    
    })

    export { styles }

并将其导入到所需的组件中。

    • 我的组件. js**
import React from 'react'
import { View } from 'react-native'

import { styles } from './styles' //<<-- import

const MyComponent = (props) => {
 . (Whatever states and handlers, etc. that your component does)
 .
 . 

 return (
    <View style={styles.container}> //<<-- usage
    ...rest of your JSX
    </View>
 )

}

export default MyComponent

祝你好运!

相关问题