旋转智能手机时改变样式

Question

我使用react-native- oriented -locker包，我想在旋转智能手机时更改样式

我使用状态来初始化我的样式，但我认为这个解决方案不是最优的

这是我的代码的一个例子

const [styles, setStyles] = useState(Styles(theme, layout))
const changeStyles = (o: OrientationType): void => {
layout = getDeviceVideoLayout(o) // return 'PORTRAIT or 'LANDSCAPE-LEFT' or 'LANDSCAPE-RIGHT'
// change the rotation of the phone
const { height, width } = Dimensions.get('window')
//I update width and height
theme.layout.width = width
theme.layout.height = height
// I update the status
setStyles(Styles(theme, layout))
}
useDeviceOrientationChange((o) => {
changeStyles(o)
}) 

我不喜欢这种状态下的样式解决方案

我的风格的一个例子

const StyleCommon = (theme: Theme, bottomSpace: number): StyleGeneral => StyleSheet.create({
container: {
height: theme.layout.height,
width: '100%',
backgroundColor: theme.colors.black
},
actionButtonContainer: {
width: 50,
backgroundColor: 'rgba(242, 241, 240, 0.3)',
borderRadius: 12,
marginBottom: 20
}
})

const StyleLayoutPortrait = (theme: Theme, bottomSpace: number): StyleLayout => StyleSheet.create({
actionContainer: {
position: 'absolute',
bottom: theme.spacing.sm + theme.layout.insets.bottom + 40 + bottomSpace,
right: theme.spacing.sm
}
})
const StyleLayoutLandscapeLeft = (theme: Theme): StyleLayout => StyleSheet.create({
actionContainer: {
position: 'absolute',
top: theme.spacing.sm,
right: theme.spacing.sm
}
})
const StyleLayoutLandscapeRight = (theme: Theme): StyleLayout => StyleSheet.create({
actionContainer: {
position: 'absolute',
right: theme.spacing.sm + theme.layout.insets.top,
top: theme.spacing.sm
}
})
const Styles = (theme: Theme, layout: VideoLayoutType, bottomSpace: number): Style => {
if (layout === 'LANDSCAPE-RIGHT') {
return ({
...StyleCommon(theme, bottomSpace),
...StyleLayoutLandscapeRight(theme)
})
} else if (layout === 'LANDSCAPE-LEFT') {
return ({
...StyleCommon(theme, bottomSpace),
...StyleLayoutLandscapeLeft(theme)
})
} else {
return ({
...StyleCommon(theme, bottomSpace),
...StyleLayoutPortrait(theme, bottomSpace)
})
}
}

我认为这个解决方案不是最优的，我该怎么办?

Answer 1

indicatorContainerProps:{
position: 'fixed',
right: '0px',
bottom: '0%',
marginBottom: '40%',
display:'flex',
justifyContent:'center',
flexDirection:'row',
alignItems:'center',
"@media (orientation:landscape)": {
marginBottom: '0px'
}

这个例子是针对Jsx或ReactJs的。你只需要指定一些类名，比如text

text:{
position: 'fixed',
right: '0px',
bottom: '0%',
marginBottom: '40%',
display:'flex',
justifyContent:'center',
flexDirection:'row',
alignItems:'center',
"@media (orientation:landscape)": { //here you can change based on orientation 
marginBottom: '0px'
}