色の16進コードを渡してもスタイルは反応ネイティブでは変わりません

Question

ログを印刷しているときにコンポーネントに16進コードの文字列を渡すために 'prop-types'を使用しています。そのUIが

Index.js

import Logo from './Logo'; 
import styles from './styles'; 

export { Logo, styles,}; 

Logo.js

に反映していないスタイルを進コード文字列を適用しています

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { View, Image } from 'react-native'; 

import styles from './styles'; 
const logoBg = require('../../images/background.png'); 
const logo = require('../../images/logo.png'); 

const Logo = ({logoBgTintColor, logoTintColor}) => { 
const logoBackgroundColor = [styles.logoBackground]; 
const logoColor = [styles.logo]; 

if (logoBgTintColor) { 
    console.log(logoBgTintColor) 
    console.log(logoBackgroundColor) 
    logoBackgroundColor.push({ tintColor: logoBgTintColor}); 
} 

if (logoTintColor) { 
    logoColor.push({ tintColor: logoTintColor }); 
} 

    return(
    <View style={styles.container}> 
    <Image 
     style={styles.logoBackground} 
     source={logoBg}> 
     <Image style={styles.logo} source={logo} /> 
    </Image> 
    </View> 
); 

}; 

Logo.propTypes = { 
    logoBgTintColor: PropTypes.string, 
    logoTintColor: PropTypes.string, 
}; 

export default Logo; 

styles.js

import { Dimensions } from 'react-native'; 
import EStyleSheet from 'react-native-extended-stylesheet'; 

const imageWidth = Dimensions.get('window').width/2; 

export default EStyleSheet.create({ 
    $largeContainerSize: imageWidth - 60, 
    $largeImageSize: imageWidth/3, 

    container: { 
     // backgroundColor: 'red', 
     alignItems: 'center', 
    }, 
    logoBackground: { 
     tintColor: '$primaryBlue', 
     alignItems: 'center', 
     justifyContent: 'center', 
     width: '$largeContainerSize', 
     height: '$largeContainerSize', 
     resizeMode: 'contain', 
    }, 
    logo: { 
     // tintColor: '$primaryWhite', 
     resizeMode: 'contain', 
    }, 

}); 

これらは私が使用しています依存関係です。

"dependencies": { 
    "color": "^2.0.0", 
    "prop-types": "^15.5.10", 
    "react": "16.0.0-alpha.12", 
    "react-native": "0.47.2", 
    "react-native-extended-stylesheet": "^0.6.0", 
    "react-navigation": "^1.0.0-beta.11" 
    } 

Answer 1

コンポーネントのスタイリングをオーバーライドするには、オブジェクトの配列を渡します。

例

return(
    <View style={styles.container}> 
    <Image 
     style={[styles.logoBackground, { tintColor: this.state.tintColor }]} 
     source={logoBg}> 
     <Image style={[styles.logo, { tintColor: this.props.tintColor }]} source={logo} /> 
    </Image> 
    </View> 
);