我在其他StackNagigation中的透明屏幕有问题。 demo
我想在ScreenTwo中点击ScreenThree
按钮后在ScreenTwo
前面显示Go to ScreenThree
叠加层。
我已将cardStyle
设为backgroundColor: 'transparent'
,但仍无效。
我不知道这里有什么问题?有人请帮助我吗?
import { StackNavigator } from 'react-navigation'; // 2.2.5
import React from 'react'
import { Image, View, Text, Button } from 'react-native'
import { StyleSheet, Dimensions, TouchableOpacity } from 'react-native'
export default class App extends React.Component {
render() {
return (
<View style={{flex: 1, backgroundColor: 'red'}}>
<Root/>
</View>
)
}
}
class HomeScreen extends React.Component {
render() {
return (
<View style={{
backgroundColor: 'blue',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: 20
}}>
<TouchableOpacity onPress={
() => {
this.props.navigation.navigate('ScreenTwo')}
}
style={{
padding: 16,
backgroundColor: 'gray'
}}>
<Text>
Go to ScreenTwo
</Text>
</TouchableOpacity>
</View>
)
}
}
class ScreenTwo extends React.Component {
render() {
return (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<Text style={{color: 'white'}}>
ScreenTwo
</Text>
<TouchableOpacity onPress={
() => {
this.props.navigation.navigate('ScreenThree')}
}
style={{
padding: 16,
backgroundColor: 'gray',
marginTop: 16
}}>
<Text>
Go to ScreenThree
</Text>
</TouchableOpacity>
</View>
)
}
}
class ScreenThree extends React.Component {
render() {
return (
<View style={{
backgroundColor: 'rgba(0,0,0,0.3)',
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<Text style={{color: 'white'}}>
ScreenThree
</Text>
</View>
)
}
}
const DetailStack = StackNavigator({
ScreenThree: {screen: ScreenThree}
}, {
mode: 'modal',
headerMode: 'none',
cardStyle: {
backgroundColor: 'transparent',
shadowColor: 'transparent'
},
})
const MainStack = StackNavigator({
HomeScreen: {screen: HomeScreen},
ScreenTwo: {screen: ScreenTwo},
DetailStack: {screen: DetailStack}
},
{
headerMode: 'none',
cardStyle: {shadowColor: 'transparent'},
})
const Root = StackNavigator({
Main: {screen: MainStack}
},
{
mode: 'modal',
headerMode: 'none',
cardStyle: {
shadowColor: 'transparent'
},
})
答案 0 :(得分:3)
我也遇到了这个问题,花了几天的时间找出原因。有两个不同的因素:
cardStyle: { backgroundColor: 'transparent'}
没有帮助。所以我不得不选择transparentCard: true
从devtools中检查并修改屏幕的backgroundColor
会将所有屏幕背景显示为transparent
,但它们仍然是白色。因此,我发现在屏幕过渡期间,将白色背景的容器添加到过渡端的每个屏幕上(仅在iOS和网络中发生)。
因此,我也必须将过渡容器的背景设置为透明-> Source code
transitionConfig: () => ({
containerStyle: {
backgroundColor: 'transparent'
}
})
要注意的另一件事是,您需要首先将这2条规则应用于 最顶层的导航器。然后,您只需修改
backgroundColor
任何您想要透明或其他颜色的屏幕:D
答案 1 :(得分:3)
将此粘贴到您的ModalStackScreen内部。您可以像样板一样使用它。
<Stack.Navigator
screenOptions={{
headerShown: false,
cardStyle: { backgroundColor: 'transparent' },
cardOverlayEnabled: true,
cardStyleInterpolator: ({ current: { progress } }) => ({
cardStyle: {
opacity: progress.interpolate({
inputRange: [0, 0.5, 0.9, 1],
outputRange: [0, 0.25, 0.7, 1],
}),
},
overlayStyle: {
opacity: progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 0.5],
extrapolate: 'clamp',
}),
},
}),
}}
mode="modal"
>
<Stack.Screen name="Home" component={HomeStack} />
<Stack.Screen name="Modal" component={ModalScreen} />
</Stack.Navigator>
有关更多信息/细节,请阅读https://reactnavigation.org/docs/stack-navigator/解释得很好
答案 2 :(得分:0)
这应该给您您想要的东西
更新: TransitionConfig必须是一个函数,对于我而言,我需要添加空的screenInterpolator函数。
const Root = StackNavigator({
Main: {screen: MainStack}
},
{
mode: 'modal',
headerMode: 'none',
cardStyle: {
shadowColor: 'transparent'
},
transitionConfig: ({ scene }) => ({
transitionSpec: {
duration: 0,
timing: Animated.timing,
easing: Easing.step0,
},
screenInterpolator: screenProps => {
return {}
}
})
})
答案 3 :(得分:0)
这对我有用-摘自Github issue。
// create custom transitioner without the opacity animation, ie. for iOS
function forVertical(props) {
const { layout, position, scene } = props;
const index = scene.index;
const height = layout.initHeight;
const translateX = 0;
const translateY = position.interpolate({
inputRange: ([index - 1, index, index + 1]: Array<number>),
outputRange: ([height, 0, 0]: Array<number>)
});
return {
transform: [{ translateX }, { translateY }]
};
}
// set it as the transitionConfig param on your stack navigator
const App = StackNavigator(
{
Modal: { screen: Modal }
},
{
mode: "modal",
headerMode: "none",
transitionConfig: () => ({ screenInterpolator: forVertical })
}
);