在不同视图上具有不同值的组件
components with different values on different views
我需要一个我创建的特定组件,以在两个不同的视图上以不同方式呈现。如何在不同的视图上为组件按钮传递不同的颜色?
视图 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>
);
};
谁能建议我如何在两个不同的视图上实现颜色和阴影样式的变化。
感谢任何线索。
要自定义组件的呈现,您可以将不同的属性传递给组件。
例子
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>
);
};
我需要一个我创建的特定组件,以在两个不同的视图上以不同方式呈现。如何在不同的视图上为组件按钮传递不同的颜色?
视图 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>
);
};
谁能建议我如何在两个不同的视图上实现颜色和阴影样式的变化。
感谢任何线索。
要自定义组件的呈现,您可以将不同的属性传递给组件。
例子
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>
);
};