如何为我的React本机项目添加外部样式表
添加外部样式表
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;
最后,运行应用程序。
doinxwow2#
如果我没理解错的话,您希望向组件添加样式。我假设您使用的是功能组件。一个好的做法是在组件所在的同一文件夹中创建一个style.js文件。
style.js
import { StyleSheet } from 'react-native'; const styles = StyleSheet.create({ container: { width: '100%', height: '100%', backgroundColor: 'green' } }) export { styles }
并将其导入到所需的组件中。
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
祝你好运!
2条答案
按热度按时间u4vypkhs1#
首先,必须创建一个文件以导出带有样式的StyleSheet对象。
样式.js
在您的组件中,您必须导入它。
最后,运行应用程序。
doinxwow2#
如果我没理解错的话,您希望向组件添加样式。
我假设您使用的是功能组件。
一个好的做法是在组件所在的同一文件夹中创建一个
style.js
文件。并将其导入到所需的组件中。
祝你好运!