Реагируйте на навигацию, чтобы сделать прозрачный экран внутри другого StackNavigator

Question

У меня проблема с прозрачным экраном внутри другого StackNagigation. демо

Я хочу показать ScreenThree оверлей перед ScreenTwo после нажатия кнопки Go to ScreenThree в ScreenTwo.

Я установил 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

Это сработало для меня - взято из этого выпуска Github .

// 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 })
  }
);

Answer 2

У меня тоже была эта проблема, и мне понадобилось пару дней, чтобы выяснить, почему.Было 2 разных фактора:

1. Я использовал реактив-навигатор v3, и cardStyle: { backgroundColor: 'transparent'} не помогло.Так что мне пришлось пойти с transparentCard: true

2. Проверка и изменение backgroundColor экрана из devtools показало бы, что весь фон экрана имеет значение transparent, но они все еще белые.Итак, я обнаружил, что во время перехода экрана, контейнер с белым фоном добавляется к каждому экрану в конце перехода (происходит только в iOS и в Интернете).

   Итак, мне пришлось установитьфон этого переходного контейнера также должен быть прозрачным -> Исходный код

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

Еще одна вещь, на которую стоит обратить внимание: , вам нужно сначала применить эти 2 правила к самому верхнему навигатору .Затем вы просто изменяете backgroundColor для любого экрана, который хотите сделать прозрачным или другого цвета: D

Answer 3

Это должно дать вам то, что вы ищете

Обновление: 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 {}
    }
  })
})