javascript - right - react native navigation header button

Color de fondo de transición en React Navigation

Question

Al pasar de una pantalla a otra (ya sea mediante tarjeta o modo modal), hay un fondo blanco que transita su alfa de 0 o 1, durante la animación de pantalla a pantalla.

Me gustaría saber cómo cambiar el color, si es posible.

Ambiente

• Versión de React Native Navigation: 1.0.0-beta.11
• React versión nativa: 0.45.1
• Plataforma: iOS y Android
• Dispositivo: iOS 10.3, iPhone 6

Algún código que uso para crear StackNavigation

Nota: El color de fondo modal se resolvió mediante la respuesta de @Jason Gaare https://stackoverflow.com/a/45065542/976655 , el problema ahora persiste en 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);

Answer 1

Mire en 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];

¡Intenta modificar el backgroundColor en la vista de raíz! Eso puede ayudarte a lograr tu objetivo.

Answer 2

El problema al que se refiere ( # 563 ) se cerró en abril de 2015 al actualizar el color de transición predeterminado de #555555 a transparente. Se puede aplicar un color de transición configurando un estilo de fondo en el navegador de la siguiente manera:

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

Es insospechable que no estuvieras al tanto de esta corrección; Alguien (''alvaromb'') comentó el problema resuelto más de un año después, en mayo de 2016, comentando "¿No debería documentarse esto?" así que evidentemente los usuarios no están conscientes de esto.

Aparentemente, se corrigió un problema de color de fondo similar (y otros problemas) en la versión 4 de react-native-router-flux (lanzado el 8 de julio de 2017), presumiblemente mediante la misma actualización de código similar.