как получить цвет фона родительского компонента в дочернем компоненте в React Native

Question

Я хочу передать значение backgroundColor родительского компонента Card в дочерний компонент CardSubTitle и изменить цвет текста на основе родительского backgroundColor. React-native и babel для меня новы и никогда не использовали состояние. Я пробовал использовать {... props}, но это не сработало.

Card. js

const Card = (props) => {
  return (
    <TouchableItem onPress={() => {}} useOpacity>
      <View style={[styles(props).card]}>{props.children}</View>
    </TouchableItem>
  );
};

Card.propTypes = {
  onPress: T.func,
  title: T.string,
  color: T.string,
};

export default Card;

CardText. js

const Card = (props) => {
  return (
    <TouchableItem onPress={() => {}} useOpacity>
      <View style={[styles(props).card]}>{props.children}</View>
    </TouchableItem>
  );
};

Card.propTypes = {
  onPress: T.func,
  title: T.string,
  color: T.string,
};

export default Card;

Answer 1

Вы не можете передать props в children

Но вы можете либо

Определить цвет фона карты в файле темы приложения например

myAppThemeFile. js

export const APP_CARD_COLOR = 'red';

, а затем укажите эту константу в родительском или дочернем компоненте

OR

Создайте компонент для субтитров, чтобы вы могли передавать реквизиты в

const Card = (props) => {
  return (
    <TouchableItem onPress={() => {}} useOpacity>
      <View style={[styles(props).card]}>
        <MySubtitleComponent color={props.color} value={subtitle} />  
      </View>
    </TouchableItem>
  );
};

ИЛИ Если children вашей карты не известны, я бы предложил добавить card-color к global объекту и ссылаться на него, как sh где угодно в вашем приложении

const Card = (props) => {
  /**
   * Reference your card-color anywhere in your app using global.cardColor
   */
  global.cardColor = props.color; 

  return (
    <TouchableItem onPress={() => {}} useOpacity>
      <View style={[styles(props).card]}>{props.children}</View>
    </TouchableItem>
  );
};

Подсказка : это решение я лично не использую Не нравится ... Было бы лучше использовать redux-action для установки цвета карты и вытащить этот цвет карты в компонент, который в нем нуждается.

Использование объекта global быстро и легко решение ... в отличие от решения redux, которое может потребовать больше кода ... но оно более надежное и безопасное.