如何全局导入react-native样式类
在React Native中，可以使用StyleSheet模块来定义和管理样式。全局导入React Native样式类的方法如下：
- 首先，在项目的根目录下创建一个名为
styles.js的文件，用于存放全局样式。 - 在
styles.js文件中，使用StyleSheet.create方法创建一个样式对象，并将所有全局样式定义在这个对象中。例如：
import { StyleSheet } from 'react-native';
const globalStyles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 16,
color: '#333',
},
// 其他全局样式...
});
export default globalStyles;- 在需要使用全局样式的组件中，通过import语句导入
styles.js文件，并使用导入的样式对象。例如：
import React from 'react';
import { View, Text } from 'react-native';
import globalStyles from './styles';
const MyComponent = () => {
return (
<View style={globalStyles.container}>
<Text style={globalStyles.text}>Hello, world!</Text>
</View>
);
};
export default MyComponent;这样，你就可以在任何组件中使用globalStyles对象中定义的全局样式了。
React Native的样式类可以用于定义组件的布局、字体、颜色等属性，使得应用具有统一的外观和风格。全局导入样式类可以提高代码的复用性和可维护性，减少样式定义的重复工作。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我正在建立一个反应应用程序。“对象作为一个React子对象无效(找到:带有键{}的对象)。如果您打算呈现一个子集合，请使用数组。”
我有这个代码App.js
import React from 'react';
import {text, StatusBar , StyleSheet, View }from 'react-native'
import Header from './src/components/Header';
import { Colors } from './src/global/styles';
expo
浏览 1提问于2022-11-05得票数 0
我试图使用Constants.statusBarHeight将视图从react本机的状态栏中分离出来，我使用expo install expo-constants安装了常量。
但是我发现了这个错误：
TypeError: undefined is not an object (evaluating '_expoConstants.Constants.statusBarHeight')
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError
at node_modules\rea
浏览 16提问于2022-01-02得票数 1
我刚开始对本机做出反应，我正在尝试为一个测试应用程序制作一个自定义组件，但是当我从博览加载这个应用程序时，我得到了这个错误：
未知错误: java.lang.Exception: Bundle返回代码: 500。
图片：
(没有足够的声誉发布图片，对不起)
我的项目结构基本上如下：
/TestApp
App.js
/src
/components
CustomButton.js
CustomButton.style.js
CustomButton.style.js
import { StyleSheet } from
浏览 0提问于2018-04-15得票数 1
回答已采纳
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-a
浏览 49提问于2020-06-25得票数 0
回答已采纳
如何在ReactJS中使用导入，如下所示： import styles from './Login.scss'; 而不是这样： import styles from './Login.module.scss'; 问题是，当我使用第一个语法导入时，没有导入任何样式。 (编辑:如果重要的话，我使用了Create React App ) (编辑2:似乎我必须遵循this并使用来自here的解决方案。)
浏览 41提问于2020-07-27得票数 1
所以我们从themeforest买了一个博客主题。我们计划将其集成到我们的web应用程序中。
我们的web应用有自己的全局css，它是在_app组件上导入的。现在，博客主题也有了自己的全局css/类名称，即它有自己的页边距、字体、颜色等。将博客主题的全局css导入_app将意味着两个全局css会发生冲突。
基本上，博客页面应该只使用它自己的全局css。其他页面，如索引页面、关于页面等不应使用博客的css
我们如何设置我们的应用程序，以便我们可以在next js中使用两个不同的全局css？
浏览 6提问于2021-05-30得票数 1
我是React本机的新手，我试着从学习基本的flexbox，但是我总是遇到一个错误，我有两个文件index.android.js和MyPresentationalComponent.js，用于样式代码文件。
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
styles,
View
} from 'react-native';
import MyPresentationalComponent from './MyPresenta
浏览 2提问于2017-01-15得票数 2
回答已采纳
我试图在React本机中设置一个视图的样式，但是我一直得到这个错误(未定义的对象不是一个对象(计算'styles.screen))。
我做了一个简单的代码..。
import React, {useState} from 'react';
import {StyleSheet, Text, View, Button, TextInput} from 'react-native';
export default function App() {
return (
<View style={styles.screen}>
浏览 5提问于2020-06-11得票数 0
回答已采纳
因此，我对使用SCSS非常陌生，我有一个客户端项目(Gatsby )，我必须使用它。
我注意到页脚如下所示
.main-footer {
background-color: yellow;
}
和组件
<section className="main-footer">
<h6 >Erreichbarkeit</h6>
</section>
上面的代码使部分变成黄色。我的问题是，我不明白组件是如何从SCSS文件接收CSS的，因为组件没有导入SCSS文件。
有人能帮我澄清这件事吗？
浏览 1提问于2020-07-26得票数 0
回答已采纳
3回答
我正在尝试在react原生中创建一个具有一些默认样式的自定义按钮，但我希望该按钮允许我根据情况更改新样式的默认样式。 代码是这样的： import React from 'react';
import {StyleSheet, TouchableOpacity, Text} from 'react-native';
export default function custom_button({txt, onPress}){
return(
<TouchableOpacity style={styles.container} on
浏览 31提问于2021-05-08得票数 0
回答已采纳
我从这里取了webpack的配置：
https://github.com/erikras/react-redux-universal-hot-example
对于生产版本，我进行了建议的更改，现在加载器为less，scss和css如下所示
{ test: /.css$/，加载程序:ExtractTextPlugin.extract(“样式-加载程序”，“css-加载程序”) }，{ test: /..less$/，加载程序：'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2版本！le
浏览 4提问于2017-01-03得票数 1
我正在开发一个反应与firebase后端原生应用程序，我想存储用户数据时，用户注册。我已经编写了以下代码来存储用户数据。
export const signUp = async function signUp(data) {
try {
const response = await Firebase.auth().createUserWithEmailAndPassword(data.email,data.password);
if(response.user.uid) {
const user = {
浏览 1提问于2020-04-24得票数 0
我是新的本机反应。我了解了组件的好处，嵌入外部styles.Now我正在尝试使用全局样式。我想在我的应用程序中使用相同样式的文本和按钮。
最好不要在每个组件中重复样式，我想在样式包下创建单独的text.js，button.js来定制视图样式。
这是我的项目结构。我想在我的index.js中导入text.js。
index.js
import { AppRegistry } from 'react-native';
import React, {Component} from 'react';
import {
Text
} from 'reac
浏览 1提问于2018-02-11得票数 1
2回答
我使用react-native属性使用typescript获得了一个类型错误。borderStyle属性在react本地声明文件(index.d.ts)中被声明为一个联合类型。以前，我只使用字符串在样式定义中设置值，但现在在类型记录中出现了错误。
问题：如何正确处理borderStyle的样式属性，使其不违反打字规则？
我的borderStyle属性，它会导致错误：
style: {
borderStyle: 'solid',
},
borderStyle类型为：
borderStyle?: "solid" | "dotted" | &#
浏览 0提问于2019-01-29得票数 2
回答已采纳
我使用的是带有ReactJs的SCSS模块，我使用id作为css选择器，如下所示。
组件中的(组件名称:- PrayerRequestDropDown)
import styles from './PrayerRequestDropDown.module.scss';
import cx from 'classnames';
<InputField
{...props}
name="answer"
id={cx(styles.addAnswer)}
type="textarea"
placeholder="
浏览 2提问于2021-03-28得票数 0
1回答
我已经创建了一个BaseComponent，它将在所有其他组件中扩展：
import React, { Component } from 'react'
import { ScrollView, Text, Image, View, TouchableOpacity, TextInput } from 'react-native'
export default class BaseComponent extends Component {
}
在我的其他组件中，我使用它的方式如下：
import BaseComponent from '../Comp
浏览 0提问于2017-11-29得票数 1
基本上，我想将react本机代码拆分为，几个js文件，。我有我的主'index.ios.js‘文件。我将一些代码(MainComponent类)移到另一个文件：'./iOSCode/main.js‘
如何将整个'./iOSCode/main.js‘文件内容导入'index.ios.js'？
我试过：
import { MainComponent as MainComponent } from './iOSCode/main.js';
and
import MainComponent from './iOSCode/main.
浏览 0提问于2016-09-08得票数 2
我有一些scss文件，其中包含一些atomik类：
atomik.scss
.w-100 { width: 100%}
.w-75 { width: 75%}
.w-60 { width: 60%}
[...] //dozens of others classes
我可以在HTML中使用它们：
<div class="w-100">
或者在其他scss文件中：
foo.component.scss
@import 'atomik'
.foo {
@extend .w-100;
[...]
}
一开始看起来很整洁，直到我意识到导入它的
浏览 0提问于2018-12-07得票数 2
我正在学习React Native，并将一些简单的样式应用到View。但是样式根本没有显示出来。我做错了什么？ import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Header extends Component {
render() {
return (
<View style={styles.container}>
<Text> Hell
浏览 44提问于2019-02-17得票数 1
回答已采纳
我正在寻找一种方法来建立一个电话认证过程的确认码按钮，我看到了许多npm模块，但这不工作我。我只是不知道如何从react-native自定义，如果有人有一个想法，谢谢
我尝试在中使用npm模块"react-native-confirmation-code-input“
但这对我不起作用，我有一个空白屏幕...下面是我的代码：
import React, {Component} from 'react';
import {View} from 'react-native';
import {Card, CardSection, Input, Bu
浏览 7提问于2019-08-15得票数 3
当CSS模块启用时，我如何使用reactstrap？反应带似乎不能正常工作。我过去通过css调用className={classes.mycss}，但是我遵循这里的指示，，但它仍然不起作用。此外，我还在我的bootstrap css中导入了index.js。知道怎么解决这个问题吗？
index.js
import 'bootstrap/dist/css/bootstrap.css';
myComponent
import { Button } from 'reactstrap';
浏览 0提问于2018-03-15得票数 2
我有一个TypeScript函数，它返回一个ReactiveNativeView。
import React from "react";
import JSX, {View} from "react-native";
class DummyClass {
static getView() {
return (
<View style={{flex: 1}}/>
);
}
}
export default DummyClass;
我用这样的方式调用这个函数：
import JS
浏览 9提问于2020-10-21得票数 1
回答已采纳
1回答
angular.json
"styles": [
"./src/assets/css/base.css",
"./src/assets/css/dashboard.css",
"src/styles.css"
],
styles.css
/* You can add global styles to this file, and also import other style files */
@import "~assets/css/base.css";
@import "~ass
浏览 4提问于2022-06-21得票数 2
我刚接触react-native，我想知道设备的当前位置。我如何使用地理定位来实现这一点。我已经通过了react-native documentation.But，但仍然无法获得位置。
这是我的代码
我在AndroidManifest.xml中添加了以下行：
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
到目前为止，这是我用来控制当前位置的代码
const location = Geolocation.getCurrentPosition();
浏览 3提问于2018-05-04得票数 1
我在angular-cli.json "../node_modules/bootstrap/dist/css/bootstrap.min.css"中有in样式。为什么当我删除这些行并添加到每个组件@import "{correct path to every directory/node_modules/bootstrap/dist/css/bootstrap.min.css}"中的每个css时，它不能像以前那样工作？
浏览 0提问于2018-04-17得票数 1
我尝试使用PostCss和next.js，它只允许我在主_app.js文件中添加主css文件，这使得所有的输出样式都是全局的，
如何为每个页面甚至每个组件创建css文件？
浏览 3提问于2020-03-31得票数 1
我有两个文件。App.js和newPage.js.我正试图从newPage.js上找到一个来自App.js的页面。我对本土化的反应是完全陌生的，所以我在工作上遇到了一些困难。
App.js
import React from 'react';
import { StyleSheet, Text, FlatList, View, Button, TextInput, TouchableOpacity } from 'react-native';
import { createStackNavigator } from 'react-navigation&#
浏览 0提问于2018-09-01得票数 0
回答已采纳
在我的反应本机项目中，我经历了上述错误。
我的App.js文件：
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
//Screens
import Header from './Shared/Header'
import ProductContainer from './Screens/Products/Pro
浏览 6提问于2022-03-12得票数 0
RN版本: 0.50
在安卓上的测试，还没有在iOS上测试过
我正在尝试使用ErrorUtils.setGlobalHandler，如github问题：中所描述的那样
但是，从这个问题中不清楚的是如何导入ErrorUtils。它不在react文档中：
以前，在RN0.41中，我能够用ErrorUtils导入import ErrorUtils from "ErrorUtils";，但是，在0.50中，当我尝试像这样导入ErrorUtils时，会收到一个红色的消息，弹出消息如下：
com.facebook.react.common.JavascriptExcepti
浏览 2提问于2018-10-26得票数 7
3回答
我完成了我的项目，现在我想将我的自定义字体设置为所有Text组件。
我认为最好的方法是创建一个自定义Text组件，并将其替换为react-native的默认文本。
现在，如何创建具有默认样式的自定义Text组件？
浏览 4提问于2018-11-12得票数 3
回答已采纳
2回答
我刚开始响应本机，目前正在尝试创建一个名为OpButton的自定义组件。这只是一个按钮，以便我可以尝试导入和导出组件。然而，每次我试图导入它时，我都会收到诸如“不变违规”之类的错误，并且不知道如何修复它。
import React, { Component } from 'react';
import { Button, Alert } from 'react-native';
export default class OpButton extends Component {
render() {
return (
<Button
浏览 1提问于2018-09-20得票数 2
回答已采纳
4回答
组件没有看到全局样式。
、、、
来自全局样式的组件
全局样式仅在此组件中可见，包括-md lg-2、col md-4 ->全局样式。
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { BrowserRouter } from 'react-router-dom'
import App from './containers/App'
import './b
浏览 3提问于2017-07-25得票数 1
回答已采纳
1回答
我在我的monorepo中创建了一个styling库，我希望这个库能够从tailwindcss库中导入类，并定义更多的定制类(使用@apply关键字)，如下所示 /*libs/shared/ui-styles/src/lib/styles.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
@apply focus:outline-none py-2 px-4 rounded transition ease-in-out duration-150
浏览 30提问于2021-10-18得票数 1
1回答
我正在尝试设置我的按钮，但我不想每次设置的背景颜色和按钮的风格，或与任何其他的认证组件。什么是最好的做法，为组件设置全球风格，如按钮，芯片，化身等。我现在可以为它创建自己的组件，但是没有理由使用vuetify。我有一个nuxt项目，但同样适用于vue。
浏览 0提问于2020-05-20得票数 1
1回答
我正在使用react-native使用ES6，尝试显示“hello”为什么它不显示hello文本。
这是我的密码
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
class PropertyFinderApp extends React.Component {
render() {
return React.createElement(React.Text, {styl
浏览 0提问于2016-05-21得票数 0
回答已采纳
我试图应用自定义样式规则:所有元素，html，和身体标记使用rules，在一个react库中。
当组件在故事书中检查时，“@全局”规则不存在
以下是相关的代码部分：
import React from 'react';
import jss from 'jss';
import { AppShellProps } from '../interfaces/AppShellProps';
import { StyledThemeContextProvider } from 'ui-context';
const globalStyl
浏览 9提问于2022-02-14得票数 0
1回答
我有一个react组件，在css文件夹.In APP.js(load1.jsx，load2.jsx，load3.jsx)中定义了多个(one.css，two.css，three.css)文件，我们已经配置了所有的js文件。
one.css应用于load1.jsx，two.css应用于load2.jsx，three.css应用于load3.jxs，但是one.css的样式被load1.jxs中的three.css覆盖。
如何在react js中修复这个问题。
浏览 0提问于2021-04-15得票数 1
我目前正在学习。我已经分叉了一个样板，目前我正在查看所有的代码，看看它是如何结合在一起的。
在扫描一些React组件文件时，我发现了一些非常有趣的东西！当为许多元素设置className时，它们使用的语法不同。他们第一次使用以下语法：
<span className={classes['counter--green']}>
...
</span>
然后，这个语法：
<button className='btn btn-default'>
...
</button>
从那时起，他们使用以下方法：
&l
浏览 2提问于2016-07-28得票数 2
回答已采纳
1回答
您好，我正在使用CDK在一个库中创建我自己的模式对话框。我已经成功地将所有内容连接起来，但对话框显示在文档的底部。
我认为问题出在样式没有正确导入。
我在/src/lib/components/modal/modal.component.css中有以下语句：
@import "~@angular/cdk/overlay-prebuilt.css";
当我构建应用程序并在演示应用程序中使用它时，我看不到元素上应用的样式。我看到的示例是要导入到styles.scss中的样式，它通常假定它是用于应用程序而不是库。我需要为库做一些不同的事情吗？
浏览 0提问于2019-08-01得票数 1
我很难弄清楚React Native的神秘错误消息是什么意思。我已经遇到以下错误大约30分钟了，在谷歌搜索之后，我仍然不知道如何修复它:找不到屏幕'User‘的'component’、'getComponent‘或'children’道具。 我的App模块： import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Button, View, Text, Image, StyleSheet } from 'react
浏览 11提问于2020-10-03得票数 0
我有一个具有以下文件夹结构的React。
我所有的“页面”都有自己的文件夹，有一个.jsx文件和一个.css来对页面进行样式化。
我在HomePage.jsx中导入了CSS，如下所示：
import '../HomePage/HomePageStyles.css'; //HomePage.jsx
到目前为止，一切都很顺利。然后，我创建了ChampionDetailPage.css并像这样在ChampionDetailpage.jsx中导入了它。
import '../ChampionDetailPage/ChampionDetailPageStyles.cs
浏览 8提问于2022-04-21得票数 1
回答已采纳
1回答
所以，我有具有全局样式的scss文件。这个文件看起来是这样的：
@import "colors";
@import "border-radius";
@import "box-shadow";
@import "paddings";
@import "margins";
@import "fonts-famalies";
@import "font-sizes";
@import "transition-durations";
@import "global-
浏览 2提问于2022-04-04得票数 1
回答已采纳
在angular.json中导入样式和在styles.css中导入有什么区别？
在angular.json中的导入
在styles.css中的导入
希望能很好地解释我的问题。提前谢谢。
浏览 2提问于2019-03-22得票数 19
我正在尝试将ngx-datatable组件添加到我的项目中，我正在学习这样做，这样我最终就可以在一个大项目中做到这一点。向数据表添加样式的方法有两种，一种是通过在styles.scss中导入 @import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/themes/dark.scss';
@import '~@swimlane
浏览 39提问于2021-01-25得票数 1
回答已采纳
2回答
反应中常见的风格-本土化
、、、
背景:我对反应完全陌生--本地人。
问:从一个有经验的角度来看，我为什么不应该这么做？
目标：-有共同的风格在我的反应-本地应用？-使用优势的VSCode IntelliSense的开发。
#common/styles.js
import { Platform, StyleSheet } from 'react-native';
export const styles = StyleSheet.create({
fontFamily: {
...Platform.select({
ios: {
fontFamily: 'Bas
浏览 0提问于2018-03-05得票数 0
1回答
新DataGrid的默认行为是隐藏过滤器图标，除非您悬停在列标题上(并应用了过滤器)。在上一个版本中，图标仍然可见。
Codesandbox
当应用过滤器时，它会添加一个新的iconButtonContainer div。这些类是：MuiDataGrid-iconButtonContainer css-ltf0zy-MuiDataGrid-iconButtonContainer
有什么方法可以推翻这种行为吗？我想做的就是在库生成该div时将可见性设置为始终可见。
浏览 2提问于2022-02-02得票数 1
我正在尝试更改ngx-charts中的文本，这是有效的： ::ng-deep .ngx-charts {
text{
fill: #ff0000;
}
} 唯一的问题是::ng-deep被弃用了？ :host将不起作用 那么我该用什么来代替它呢？
浏览 269提问于2021-09-29得票数 0
回答已采纳
在onMasterClicked方法中，我希望通过web-socket连接并向服务器发送数据。
我更喜欢使用来自react-native的本地web套接字库，我也可以使用socket.io客户端，但这对我不起作用。我不需要在应用程序的服务器端代码，服务器是云。
我只想知道如何通过web-socket连接到服务器并发送数据，并在它向应用程序发送数据时监听它
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Tou
浏览 1提问于2017-06-08得票数 0
1回答
我是新的角度，我试图学习它使用的主题。它使用Sass进行造型设计，在我的组件中，我想设置div的背景色。但是，我想使用主题提供的颜色之一，这样，如果用户切换主题，颜色可以更改。我不知道如何在组件的scss文件中使用主题的全局颜色。
这就是我想要的
.product-container{
background:#3d3780; // Instead of using a hard coded color, I want to use theme color here
}
浏览 1提问于2018-06-07得票数 3
回答已采纳
对于您对XSLT的怀疑，我会寻求您的指导。在我当前的项目中，需要创建许多XSLT文件。在这些转换中，执行的公共步骤很少；for.eg。更改输入xml中元素值的大写。我目前正在XSLT中使用下面的代码，所以如果创建了50个XSLT，那么这段代码将会重复。
<xsl:variable name="smallcase" select="'abcdefghijklmnopqrstuvwxyz'" />
<xsl:variable name="uppercase" select="'
浏览 1提问于2012-09-11得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
