React Nativeグローバルスタイル

私はReactを初めて使用し、コンポーネントベースのインラインスタイルの利点を理解しています。しかし、なんらかのグローバルスタイルを実現するための適切な方法があるかどうか疑問に思っています。たとえば、アプリ全体で同じテキストとボタンのカラーリングを使用したいとします。

すべてのコンポーネントで繰り返すのではなく（その後、必要に応じてxか所で変更する必要があります）、私の最初の考えは、独自のファイルに「ベース」StyleSheetクラスを作成し、コンポーネントにインポートすることです。

より良い、またはもっと「反応する」方法はありますか？

再利用可能なスタイルシートを作成できます。例：

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>

スタイル（IE、Style.js）のファイルを作成します。

次に例を示します。

import { StyleSheet } from 'react-native';

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

スタイルを使用するファイルのいずれかに、以下を追加します。

import styles from './Style'

いくつかのグローバル変数を設定したいだけなら、試すことができます。

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
    }
});

グローバルスタイル変数をサポートするreact-native-extended-stylesheetを試すこともできます。

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

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

' 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>
    );
  }
}

私のライブラリreact-native-style-tachyonsを試してください。これにより、グローバルスタイルだけでなく、ルートのフォントサイズに相対的な幅と高さを備えたデザインファーストのレスポンシブレイアウトシステムが実現します。

これらの方法はすべて質問に直接答えますが、私に関する限り、Reactのようなコンポーネントベースの設計システムでそれを行う方法ではありません。

最初にアトミックコンポーネントから始めて、それらを最上位までレイヤー化してグループ化できます。次の記事は、この一連の考えをより明確にするかもしれません：http : //atomicdesign.bradfrost.com/chapter-2/

自然界では、原子要素が結合して分子を形成します。これらの分子はさらに結合して、比較的複雑な生物を形成することができます。

存在しない基本コンポーネントが必要な場合は、それを作成します。次に、それを使用して他の特定性の低いコンポーネントを作成できます。例えば：

// rerender is cheaper without style prop when
// the default style is an unchanged reference
// instead of a new object every time.
const style = {
  color   : 'MidnightBlue',
  fontSize: 14,
}

function getStyle (styleProp) {
  // styleProp is able to overwrite style
  if (styleProp) return {...style, ...styleProp}
  else return style
}

export default function CustomText (props) {
  return (
    <Text style={getStyle(props.style)}>
      {props.children}
    </Text>
  )
}

次に、のCustomText代わりにどこでも使用しますText。あなたはまた、でそれを行うことができView、div、spanまたは何か他のもの。

外部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>

ここでは、スタイルを並べ替えてさまざまなコンポーネントにインポートするための洗練された方法を見つけることができます。すべてのスタイルファイルを収集するフォルダーを作成し、ファサードとして機能するindex.jsを作成できます。

index.jsは次のようになります。

import Variables from './variables';
import GlobalStyles from './global'; 

export { Variables, GlobalStyles };

次のようにインポートします：

import { GlobalStyles } from './stylesheets/index';

詳細はこちら：

https://thoughtbot.com/blog/structure-for-styling-in-react-native

React NativeのShoutemテーマをご覧ください。

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のコンポーネントセットも提供しているので、それらをインポートしてグローバルスタイル/テーマにスタイルを設定できます。