React Native全局样式-Java 学习之路

我是React的新手，我了解基于组件的内联样式的好处 . 但我想知道是否有一种体面的方式来拥有某种全球风格 . 例如，我想在我的应用程序中使用相同的文本和按钮着色 .

而不是在每个组件中重复（并且随后必须在x位置更改它），我最初的想法是在它自己的文件中创建一个“基础”StyleSheet类并将其导入我的组件中 .

是否有更好或更“反应”的方式？

9 回答

您可以创建可重用的样式表 . 例：

style.js

'use strict';

var React = require('react-native');

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

alwaysred: {
    backgroundColor: 'red',
    height: 100,
    width: 100,
},

});

在您的组件中：

var s = require('./style');

...然后：

<View style={s.alwaysred} ></View>

回复于 2024-04-28T00:47:49+08:00

为您的样式创建一个文件（I.E.， Style.js ） .

这是一个例子：

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1
  },
  welcome: {
    fontSize: 20
  }
});

在要使用样式的任何文件中，添加以下内容：

import styles from './Style'

回复于 2024-04-28T00:47:49+08:00

如果你只是想设置一些全局变量，你可以试试 .

AppStyles.js

export default AppStyles = {
    colour: {
        background: '#f4f9fd',
        font: '#434e5a',
        primary: '#ff3b30'
    }
}

index.ios.js

import AppStyles from './AppStyles';

const styles = StyleSheet.create({
    container: {
        backgroundColor: AppStyles.colour.background
    }
});

回复于 2024-04-28T00:47:49+08:00

您也可以尝试支持全局样式变量的react-native-extended-stylesheet：

// app.js
EStyleSheet.build({
   buttonColor: 'green'
});

// component.js
var styles = EStyleSheet.create({
  button: {
    backgroundColor: '$buttonColor',
    ...
  }
});

回复于 2024-04-28T00:47:49+08:00

您必须创建一个文件来存储其中的所有样式，如' styles.js '，并根据需要编写css类型代码

'use strict';
import {StyleSheet} from 'react-native';

export default StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    title: {
        fontSize: 10,
        color: '#000',
        backgroundColor: '#fff'
    },

    button: {
        fontSize: 12,
        color: '#000',
        backgroundColor: '#fff'
    }

});

现在您可以使用全局样式

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import StyleSheet from './config/styles';

export default class App extends Component {

  render() {
    return (
      <View
        style={StyleSheet.container}>
        <Button
          style={StyleSheet.button}
          title="Go to Lucy's profile"
        />
      </View>
    );
  }
}

回复于 2024-04-28T00:47:49+08:00

87

试试我的库react-native-style-tachyons，它不仅为您提供全局样式，而且是一个设计优先的响应式布局系统，其宽度和高度相对于您的根字体大小 .

回复于 2024-04-28T00:47:49+08:00

外部CSS文件main.css

'use strict';

var {
   StyleSheet,
 } = 'react-native';

module.exports = StyleSheet.create({

  main: {
     backgroundColor: 'gray',
     height: 20,
     width: 100,
  }
});

在组件中创建css文件的实例 .

var mainCss = require('./main');

<View style={mainCss.main}><Text>Hello</Text></View>

回复于 2024-04-28T00:47:49+08:00

7
所有这些方法都直接回答了这个问题，但并不是这样做的 . 这些人坚持旧的思维方式，你可以在哪里设置可用元素的样式 . 在React中，您可以制作组件 . 因此，如果您需要一个不存在的基础组件，那么就可以实现它 . 例如：
```
function getStyle (styleProp) {
  return {
    color   : getTheme().text,
    fontSize: 14,
    ...styleProp
  }
}

export default function CustomText (props) {
  return (
    <Text style={getStyle(props.style)}>
      {props.children}
    </Text>
  )
}
```
然后使用 CustomText 到处而不是 Text . 你也可以用 View ， div ， span 或其他任何东西来做 .
回复于 2024-04-28T00:47:49+08:00

-3

看看Shoutem Themes为React Native .

以下是Shoutem主题的内容：

某种样式通过其样式名称自动应用于组件的全局样式：

const theme = {
  'my.app.ComponentStyleName': {
    backgroundColor: 'navy',
  },
};

使用 styleName 激活某些特定于组件的样式（如CSS类）：

const theme = {
  'my.app.ComponentStyleName': {
    '.rounded': {
      borderRadius: 20,
    },
    backgroundColor: 'navy',
  },
};

// Implementation - will apply borderRadius to Component
<Component styleName="rounded"/>

自动样式继承：

const theme = {
  'my.app.ComponentStyleName': {
    'my.app.ChildComponentStyleName': {
      backgroundColor: 'red',
    },
    '.rounded': {
      borderRadius: 20,
    },
    backgroundColor: 'navy',
  },
};

// Implementation - will apply red background color to ChildComponent
<Component styleName="rounded">
  <ChildComponent/>
</Component>

组合组件的嵌套样式：

const theme = {
  'my.app.ComponentStyleName': {
    containerView: {
      paddingTop: 10,
    },
    innerView: {
      backgroundColor: 'yellow',
    },
  },
};

// Of course do not forget to connect Component
function Component({ style }) {
  return (
   <View style={style.containerView}>
    <View style={style.innerView}>
     <Text>Warning with yellow background.</Text>
    </View>
   </View>
  );
}

要使它工作，您需要使用 StyleProvider ，这是一个包装器组件，它通过上下文为所有其他组件提供样式 . 与Redux StoreProvider 相似 .

此外，您需要使用 connectStyle 将组件连接到样式，以便始终使用连接组件 . 与Redux connect 相似 .

export const styledComponent = connectStyle('my.app.ComponentStyleName',
                                { ...defaultStyleIfAny })(Component);

您可以在文档中查看示例 .

最后，我们还在UI ToolKit中提供了一组已经连接到样式的组件，因此您可以在全局样式/主题中导入它们并设置样式 .

回复于 2024-04-28T00:47:49+08:00

React Native全局样式

9 回答

相关问题