反応するネイティブでユーザーが選択できるテーマ/スタイルを実装する方法は？

Question

ライトテーマを選択してダークテーマに切り替えると、すべてのシーンがダークテーマを使用してすぐにレンダリングされます。

これが役に立ちそうなら、私はreact-native-router-fluxを使用しています。

事前のおかげで、

Answer 1

あなたは、テーマごとに色を持っている2つのオブジェクトを含む1つのJSファイルを作成することによって開始することができます。次に、デフォルトとして1つを使用し、ユーザーが別のテーマを選択した場合は、そのテーマをデータベースに保存するか、ローカルストレージを使用して関連オブジェクトをプルします。異なるアプローチが可能です

import * as themes from 'Themes' 
const currentTheme = this.props.currentTheme ? this.props.currentTheme : 'theme1' 

const styles = StyleSheet.create({ 
    button: { 
    color: themes[currentTheme].buttonColor 
    }, 

}) 

Answer 2

：

export const theme1 = { 
    blue: '#fddd', 
    red: '#ddddd', 
    buttonColor: '#fff' 
} 

export const theme2 = { 
    blue: '#fddd', 
    red: '#ddddd' 
    buttonColor: '#fff' 
} 

それからちょうど、関連するファイルをインポートします。それらの1つは、React contextを使用することです。一般的には慎重に使用するべきですが、テーマは適切な公式の例の1つです。

テーマ設定は、ですから、例えばあなたが設定

class App extends Component { 
    getChildContext() { 
    return {theme: { primaryColor: "purple" }}; 
    } 
    ... 
} 
App.childContextTypes = { 
    theme: React.PropTypes.object 
}; 

ように見えるかもしれませんあなたはサブツリー全体が情報

のいくつかの作品へのアクセスを持っている場合があります際の良い例です。アプリケーションの残りの部分にコンテキストを作成し、コンポーネントで使用します。

class Button extends Component { 
    render() { 
    return <TouchableHighlight underlayColor={this.context.theme.primaryColor}>... 
    } 
} 
Button.contextTypes = { 
    theme: React.PropTypes.object 
}; 

テーマを切り替える場合は、ユーザーの選択に基づいた状態/小道具に基づいてコンテキストを設定できます。

現在、私たちは同じ質問を扱っているため、react-native-themeableというプロトタイプライブラリを開始しています。

テーマは、コンテキストを使用してテーマを保存し、元のコンポーネントを置き換えることができるようにRNコンポーネントを（再）実装することです。アプリの起動時に - あなたはhttps://github.com/instea/react-native-themeable/blob/master/examples/src/SwitchTheme.js