我正在使用 react-navigation 和 stack-navigator 来管理我的屏幕。
我使用的平台:
- Android
- React Native: 0.47.1
- React Navigation: 1.0.0-beta.11
- 模拟器和设备
我有一个屏幕,它作为模态表单,但实际上它是一个全屏幕。为什么重要的是"作为模态表单"的部分?因为它是一种带有一些选项和透明背景颜色的模态菜单。
这是我期望的结果:
但我得到的是这个:
正如你所看到的,在第二个示例中,背景颜色完全被替换,或者先前加载的组件被卸载,所以我想要实现的效果丢失了。 我的想法是能够像任何其他屏幕一样导航到这个屏幕。
如果使用 react-navigation 无法实现,我该如何做?
由于这个组件是一个跨应用程序组件并封装了很多机制和逻辑,因此它执行操作(redux)。这就是为什么我不能将其用作PureComponent
,而是依靠使用此组件的组件。至少将此组件设置为 PureComponent 将强制我在许多其他组件中复制许多机制和逻辑。
为了让问题简洁明了,并避免让问题变得巨大,两个屏幕具有完全相同的样式,但通过StackNavigation
推送的屏幕将替换backgroundColor
,或卸载前一个屏幕。
这就是我目前的情况:
//PlaylistSelector.js
render() {
//Just a full size empty screen to check and avoid bugs
//Using red instead of transparent, works
return (
<View style={{ flex: 1, backgroundColor: 'transparent' }}>
</View>
);
}
//Navigator.js
import { StackNavigator } from 'react-navigation';
import Album from './Album'; //This is the screen I expect to keep at the background
import PlaylistSelector from './PlaylistSelector';
const AppNavigator = StackNavigator(
{
...moreScreens,
Album: { screen: Album },
PlaylistSelector: {
screen: PlaylistSelector,
navigationOptions: {
style: { backgroundColor: 'red' } //Does not work, red is just to ilustrate, should be transparent,
cardStyle: { //Does not work,
backgroundColor: 'transparent',
},
bodyStyle: { //Does not work,
backgroundColor: 'transparent',
},
}
}
},
{
initialRouteName: 'Splash',
headerMode: 'none',
cardStyle: { //Does not work
backgroundColor: 'transparent',
},
transitionConfig: (): Object => ({ //Does not work
containerStyle: {
backgroundColor: 'transparent',
},
}),
}
);
export default AppNavigator;
containerStyle:{backgroundColor: 'transparent'}
。原来我正在编辑错误的stackNavigator,因为我使用了嵌套的stackNavigator。 - user5283119