在不同视图上具有不同值的组件

Question

我需要一个我创建的特定组件来在两个不同的视图上进行不同的渲染。如何在不同的视图上为组件按钮传递不同的颜色？

视图1：

const View1 = () => {
  return (
    <View {...this.props} style={styles.container}>
      <Text>
        {'More View construction'}
      </Text>
      <AButton />
    </View>
  );
};

视图2：

 const View2 = () => {
   return (
     <View {...this.props} style={styles.container}>
       <Text>
         {'More View construction'}
       </Text>
       <AButton />
     </View>
   );
};

按钮组件：

 import ActionButton from 'react-native-action-button';
 const shadowStyle = {
 shadowOpacity: 100,
   shadowOffset: {
  width: 100,
   height: 5,
  },
  shadowRadius: 20,
 elevation: 2,
 };
   const AButton = () => {
     return (
       <ActionButton buttonColor={colors.red} shadowStyle={shadowStyle}>
         <ActionButton.Item buttonColor={colors.yellow}>
           <Text style={styles.actionButtonIcon}>
             {'xyz'}
           </Text>
         </ActionButton.Item>
       </ActionButton>
     );
   };

谁能建议我如何在两个不同的视图上实现颜色和阴影样式的更改。

感谢任何线索。

Answer 1

要自定义组件的渲染，您可以将不同的 props 传递给组件。

示例

const View1 = () => {
 return (
   <View {...this.props} style={styles.container}>
     <Text>
       {'More View construction'}
     </Text>
     <AButton
       shadowStyle={/*some custom shadow style object */}
       buttonColor={/*some custom button color */} />
   </View>
 );
};

---

const View2 = () => {
 return (
   <View {...this.props} style={styles.container}>
     <Text>
       {'More View construction'}
     </Text>
     <AButton
       shadowStyle={/*some other custom shadow style object */}
       buttonColor={/*some other custom button color */} />
   </View>
 );
};

---

const AButton = (props) => {
    return (
      <ActionButton buttonColor={props.buttonColor} shadowStyle={props.shadowStyle}>
        <ActionButton.Item buttonColor={colors.yellow}>
          <Text style={styles.actionButtonIcon}>
            {'xyz'}
          </Text>
        </ActionButton.Item>
      </ActionButton>
    );
};