web-dev-qa-db-ja.com

変数を別のファイルにエクスポートする方法は？ Reactネイティブ

私のプロジェクトでは、グローバルスタイルのメインファイルを使用していますが、個々のコンポーネントでスタイルを使用しています。それでも、同じ変数を使用してfont-size、colorsを要素に渡します。

私はReactの専門家ではありませんが、コードを繰り返さないように変数を別のファイルに移動するといいでしょう。適切な方法でこれを行うにはどうすればよいですか？

グローバルスタイル：

'use strict';

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

  let {
    StyleSheet,
  } = React;

  let INIT_COLOR = "#fff";
  let INIT_FONT_SIZE = 16; 


  module.exports = StyleSheet.create({
    container: {
        backgroundColor: INIT_COLOR,
        fontSize: INIT_FONT_SIZE
    },
});

コンポーネントスタイル：

import React from 'react';
import { View, StyleSheet, Button} from 'react-native';

class ActionButton extends React.Component {

 render() {
   let INIT_COLOR = "#fff";
   let INIT_FONT_SIZE = 16;

  return (
    <View style={styles.buttonContainer}>
        <Button
          onPress={this.props.onPress}
        />
    </View>
   );
 }
}

const styles = StyleSheet.create({
    buttonContainer: {
      backgroundColor: INIT_COLOR,
      fontSize: INIT_FONT_SIZE
    }
   });

export default ActionButton;
javascriptreactjsreact-nativeimportexport
6
Italik

たとえば、themes/variables.jsにファイルを作成するだけです。このようなもの：

export const colors = {
  INIT_COLOR: "#fff",
  //... more colors here
};

export const fonts = {
  INIT_FONT_SIZE: 16,
};

必要に応じて各色をエクスポートすることもできますが、色のオブジェクトをエクスポートすることをお勧めします。

次に、そのファイルをコンポーネントにインポートできます。

import React from 'react';
import { View, StyleSheet, Button} from 'react-native';
import { colors, fonts } from 'theme/variables';

class ActionButton extends React.Component {

 render() {
  return (
    <View style={styles.buttonContainer}>
        <Button
          onPress={this.props.onPress}
        />
    </View>
   );
 }
}

const styles = StyleSheet.create({
    buttonContainer: {
      backgroundColor: colors.INIT_COLOR,
      fontSize: fonts.INIT_FONT_SIZE
    }
});

export default ActionButton;
8
Crysfel