Question

我是新手来反应原生。我学会了组件的好处，嵌入了外部样式。现在我正在尝试使用全局样式。我想在我的应用程序中使用相同样式的文本，按钮。< / p>

最好不要在每个组件中重复样式，我想在样式包下创建单独的text.js，button.js来自定义视图样式。

这是我的项目结构。我想将text.js导入我的index.js。

index.js

import { AppRegistry } from 'react-native';
import React, {Component} from 'react';
import {
  Text
} from 'react-native';
import text from './App/styles';

export default class FirstApp extends Component{
    render(){
      return (
        <Text styles={text.p}>Customising React</Text>
      );
    }
}
AppRegistry.registerComponent('FirstApp', () => FirstApp);

text.js

import{
  StyleSheet
} from 'react-native';

export default const text = StyleSheet.create({
  p: {
    color: 'blue',
    fontSize: 14
  }
});

有没有办法将我的text.js样式导入index.js中的文本视图？

Answer 1

Export default const is invalid. 如果您希望文本成为默认导出，则需要定义它并在单独的语句中导出。

const text = StyleSheet.create({...}); export default test;

此外，您的导入路径看起来与您的实际应用程序结构不符。

从＆＃39; ./ App / styles＆＃39;;
导入文字

更改为

从＆＃39; ./ styles / text.js＆＃39;;
导入文字

Answer 2

在style.js

上创建

    const style = StyleSheet.create({
    p: {
        color: 'blue',
        fontSize: 14
      }
    })

export default style;

并导入您想要的任何地方

像这样

import Style from './(path to file)/style'

使用这样的风格

<View style={[Style.p, {
                        padding: 20,
                        backgroundColor: 'grey',
                        justifyContent: 'center',
                        alignContent: 'center'
                    }]}>

如果一次性使用

 <View style={Style.p}>

所以这可能会有所帮助

Answer 3

创建一个名为'style.js'的新文件

export const customStyle = StyleSheet.create({
   blueblue:{
      color: blue
   }
})

并在您的组件文件中

import {customStyle} from './style'

...
<Text style={customStyle.blueblue}>Hi</Text>

如何在本机中导入和导出样式？

3 个答案: