react-native - React 导航在其他 StackNavigator 中制作透明屏幕

Question

我在其他 StackNagigation 中遇到透明屏幕问题。
demo

我要展示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'

    },
})

Answer 1

我也遇到了这个问题，花了几天时间才找出原因。有2个不同的因素:

我使用的是 react-navigator v3 和 cardStyle: { backgroundColor: 'transparent'}没有帮助。所以我不得不使用 transparentCard: true

检查和修改 backgroundColor来自 devtools 的屏幕将显示所有屏幕背景为 transparent但他们还是白人。所以我发现的是在屏幕过渡期间，一个白色背景的容器被添加到过渡结束的每个屏幕 (仅发生在 iOS 和 Web 中)。

所以，我必须将这个过渡容器的背景也设置为透明 -> Source code

transitionConfig: () => ({
  containerStyle: {
    backgroundColor: 'transparent'
  }
})

Another thing to note is you need to apply these 2 rules first to the very topmost navigator. Then you just modify the backgroundColor for whatever screen you want to be transparent or of other color :D