react-native 如何在子组件中获取父组件背景颜色

Question

我想将父组件 Card 的 backgroundColor 的值传递给子组件 CardSubTitle 并根据父 backgroundColor 更改文本颜色。 React-native 和 babel 对我来说是新的并且从未使用过状态。我尝试使用 {...props} 但没有成功。

卡片.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

但你也可以

在你的 app-theme-file 中定义 Card-Background-Color 就像

myAppThemeFile.js

export const APP_CARD_COLOR = 'red';

然后在你的父组件或子组件中引用这个常量

或

为字幕创建一个组件，以便您可以将道具传递给

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

或 如果您的卡的children 有点不为人知， 我建议将 card-color 添加到 global 对象并在应用中的任何位置随意引用它

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来设置card-color，然后在组件中拉取那个card-color需要它

使用global 对象是一种快速简单的解决方案...不像redux-solution 可能需要更多编码...但它更健壮和安全。