색상 16 진 코드를 전달하지만 스타일은 반응 네이티브에서 변경되지 않습니다.

Question

로그를 인쇄하는 동안 'prop-types'을 사용하여 구성 요소에 색상 16 진 코드 문자열을 전달하면 전달 된 소품이 정확한 결과를 제공하지만 육각 코드 문자열을 신청하는 것은

Logo.js에게 자사의 UI

하는 index.js

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

export { Logo, styles,}; 

에 반영하지 않는 스타일

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