Question

抱歉，如果已经提出此问题，我没有找到任何相关主题。

我想知道在导入之后是否还有更改组件样式。假设我创建了一个具有特定样式属性的按钮组件。

const Button = () => {
	const { buttonStyle } = styles;
	return (
		<TouchableOpacity style={buttonStyle}>
		</TouchableOpacity>
	);
};

const styles = StyleSheet.create({

	buttonStyle: {
		flex: 1,
		alignSelf: 'stretch',
		backgroundColor: '#fff',
		borderRadius: 5,
		borderWidth: 1,
		borderColor: '#007aff',
		marginLeft: 5,
		marginRight: 5

	}
});

export { Button };

我想在我的视图中导入此按钮，但我需要更改'borderColor'或任何其他样式属性。

import Button from './src/components/Button';

render() {
		return (
			<Button>
			</Button>
		);
	};

有没有这样做？或者可能采用不同的方法？提前谢谢。

Answer 1

您可以通过道具传递自定义样式并覆盖Button组件中设置的样式。这是通过将一组样式对象传递给＆＃39;样式来实现的。支柱。例如：

＆＃13;

super.accept

＆＃13;

const Button = (props) => {
    const { buttonStyle } = styles;
    const style = props.style;
  
	return (
		<TouchableOpacity style={[buttonStyle, style]}>
		</TouchableOpacity>
	);
};

const styles = StyleSheet.create({

	buttonStyle: {
		flex: 1,
		alignSelf: 'stretch',
		backgroundColor: '#fff',
		borderRadius: 5,
		borderWidth: 1,
		borderColor: '#007aff',
		marginLeft: 5,
		marginRight: 5

	}
});

export { Button };

＆＃13;

React Native - 导入后更改组件样式

1 个答案: