Question

我正在使用＆＃39; prop-types＆＃39;在打印日志时将颜色十六进制代码字符串传递给组件，传递的道具给我正确的结果但是当我将十六进制代码字符串应用于样式时它不反映在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> );

传递颜色十六进制代码但样式在react-native中没有改变

1 个答案: