コンポーネントの「スタイル」小道具からCSSプロパティ値を取得

Question

私はライブラリのReact Nativeコンポーネントを作成しています。ユーザーはReact.Viewや他の組み込みコンポーネントと同じようにstyleプロパティを使用してスタイリングすることができます。

しかし、私のコンポーネントは実際にはいくつかのネストされたビューで構成されているので、内のどのスタイルに配置するかを計算する必要があります。です。たとえば、画像のサイズを周囲の境界線の太さに基づいて調整したり、指定されたテキストの色に基づいてハイライトカラーを調整したり、別のスタイリングのスタイリングの一部を推測する必要が生じるかもしれません。

これを行うには、style propとして渡されるもののうち実際のCSSプロパティ（borderWidth: 2またはbackgroundColor: 'pink'など）を抽出できる必要があります。普通のオブジェクトとして提供されている限り、これは問題ありませんが、React.StyleSheet.createの呼び出しの結果でもかまいません。これは、すべてのセレクタが単に数値IDにマップされた不透明なオブジェクトのようです。

これらを解決して実際のCSSプロパティを取得するにはどうすればいいですか？それらを複雑にするには、そのままViewに渡します。

Answer 1

ビルトインStyleSheet.flatten機能（または同一flattenStyle機能）合法的な値へのオブジェクトのマッピングCSSプロパティ名にstyle小道具に渡すことができる何かを変えることができます。これは普通のオブジェクト、IDがStyleSheet.create()から返されたID、および配列で機能します。コンポーネント定義内からstyleプロパで指定された幅をチェックする

使用例：

import { StyleSheet } from 'react-native' 

// ... then, later, e.g. in a component's .render() method: 

let width = StyleSheet.flatten(this.props.style); 

Answer 2

あなたはStylesheetRegistryをインポートする必要があります。

StyleSheetRegistry = require("../../node_modules/react-native/Libraries/StyleSheet/StyleSheetRegistry"), 

が続いスタイルのIDを渡し：

var style = StyleSheetRegistry.getStyleByID(this.props.style) 

Answer 3

拡張スタイルシートを使用して作成スタイルで元の値が含まれていhttps://github.com/vitalets/react-native-extended-stylesheet#underscored-styles

に見てください。下線付き小物：

const styles = EStyleSheet.create({ 
    text: { 
    fontSize: '1rem', 
    color: 'gray' 
    } 
}); 

ランタイムで

：

styles = { 
    text: 0, 
    _text: { 
    fontSize: 16, 
    color: 'gray' 
    } 
}