[英]How to style hover in react-native?
In reactjs I could just import styles from './styles.css'
with a stylesheet containing .button
, . button:hover
在 reactjs 中,我可以
import styles from './styles.css'
并使用包含.button
的样式表. button:hover
. button:hover
, . button:active
. button:hover
, . button:active
. button:active
and it works. . button:active
,它的工作原理。
Online converters turn this stylesheet into "button"
, "button_hover"
, "button_active"
styles, but making a StyleSheet
from those in react-native doesn't work.在线转换器将此样式表转换为
"button"
、 "button_hover"
、 "button_active"
styles,但从 react-native 中的StyleSheet
制作样式表不起作用。
How can I change element style on hover and active ?如何更改 hover 和active上的元素样式?
.button {
background: #ff4931;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
transition: all 200ms ease;
}
.button:hover {
transition: all 100ms ease;
transform: scale(1.05);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.button:active {
transition: all 50ms ease;
transform: scale(1.03);
background: #e5432d;
}
This is how I've solved the problem for now, manually listening for the hover start and mousedown events:这就是我现在解决问题的方法,手动监听 hover 启动和 mousedown 事件:
import React from 'react'
import { View } from 'react-native'
class EventView extends React.Component {
setStyles = (styles) => {
this.root.setNativeProps({
style: styles,
})
}
state = {
hover: false
}
render() {
const { activeStyle, hoverStyle, style, onPressIn, onPressOut, ...passThrough } = this.props
return (
<View
ref={(component) => { this.root = component }}
onMouseEnter={
() => {
this.setStyles(hoverStyle)
this.setState({ hover: true })
}
}
onMouseLeave={
() => {
this.setStyles(style)
this.setState({ hover: false })
}
}
onStartShouldSetResponder={() => true}
onResponderStart={
() => {
this.setStyles(activeStyle)
}
}
onResponderRelease={
() => {
this.setStyles(this.state.hover ? hoverStyle : style)
}
}
style={style}
{...passThrough}
/>
)
}
}
export default EventView
Using the special view like this使用这样的特殊视图
const styles = StyleSheet.create({
"button": {
"background": "#ff4931",
"boxShadow": "0 0 4px rgba(0, 0, 0, 0.3)",
"transition": "all 200ms ease"
},
"button_hover": {
"transition": "all 100ms ease",
"transform": "scale(1.05)",
"boxShadow": "0 0 8px rgba(0, 0, 0, 0.5)"
},
"button_active": {
"transition": "all 50ms ease",
"transform": "scale(1.03)",
"background": "#e5432d"
}
})
return (
<EventView
style={styles.button}
hoverStyle={[ styles.button_hover, styles.button ]}
activeStyle={[ styles.button_active, styles.button_hover, styles.button ]}
>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.