Цвет фона перехода в React Navigation

При переходе с одного экрана на другой (с использованием карточного или модального режима) появляется белый фон, который меняет альфа-канал с 0 o 1 во время экрана на анимацию экрана.

Я хотел бы знать, как изменить цвет, если это возможно.

enter image description here

Среда

  • React Native Navigation версия: 1.0.0-бета .11
  • React Родная версия: 0.45.1
  • Платформа: iOS и Android
  • Устройство: iOS 10.3, iPhone 6

Некоторый код, который я использую для создания StackNavigation

Примечание. Модальный цвет фона был решен с помощью ответа @Jason Gaare qaru.site/info/505244/..., теперь проблема сохраняется в StackNavigation.

let navOptions = {
    headerMode: 'screen',
    navigationOptions: ({navigation}) => ({
        headerTintColor: '#fff',
        headerStyle: {
            backgroundColor: '#1A1A1A',
        },
        headerTitleStyle: {
            color: '#fff',
            fontFamily: 'my-font'
        },
        headerLeft: (<ImageBtn
                        buttonStyle={{ .. }}
                        buttonHighlightStyle={{}}
                        source={ myImage }
                        imageStyle={{ ... }}
                        callback={navigation.goBack.bind(this, null)} />)
    })
};

const MyTab = StackNavigator({
    MyScreen1: {screen: MyScreen1},
    MyScreen2: {screen: MyScreen2},
    MyScreen3: {screen: MyScreen3},
    MyScreen4: {screen: MyScreen4},
}, navOptions);

Ответы

Ответ 1

Проблема, о которой вы говорите (# 563), была закрыта в апреле 2015 года, обновив цвет перехода по умолчанию от #555555 до прозрачного. Цвет перехода может быть применен путем установки стиля фона в навигаторе следующим образом:

<Navigator
  style={{flex: 1}} // style for the navigator container
  transitionerStyle={{backgroundColor: 'black'}} // style applied to the scenes container
 ...

Это неудивительно, что вы не знали об этом исправлении; кто-то ( "alvaromb" ) прокомментировал фиксированную проблему через год, в мае 2016 года, отметив: "Разве это не должно быть документировано?" поэтому, очевидно, пользователи не знают об этом.

По-видимому, аналогичная проблема с фоновым цветом (и другие проблемы) была исправлена ​​в версии 4 react-native-router-flux (выпущена 8 июля 2017 года), предположительно по тому же/аналогичному обновлению кода.

Ответ 2

Я решил эту проблему, добавив это в мой StackNavigator:

cardStyle: {
  backgroundColor: 'rgba(0,0,0,0)',
  opacity: 1,
},

Теперь переход полностью прозрачен. Я использую "react-navigation": "^1.5.11".

Ответ 3

Посмотрите AppDelegate.m:

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"Example"
                                           initialProperties:nil
                                               launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

Попробуйте изменить backgroundColor на rootview! Это может помочь вам в достижении вашей цели.