javascript - style - Reacciona la navegación cambiando los colores de fondo y el estilo StackNavigator

span html

Question

Soy bastante nuevo en React Native, pero tengo una aplicación de trabajo simple con tres escenas. Antes estaba usando Navigator, pero me sentía lento y estaba emocionado de probar React Navigation (como en https://reactnavigation.org/ ). Después de implementar React Navigation, mi color de fondo cambió de blanco a gris, y lo que era gris a blanco. Esto es extraño y no debería estar relacionado. Sin embargo no cambié mis estilos. Solo implementé la nueva navegación y los colores cambiados. Cuando vuelvo al navegador mis colores vuelven. Estoy usando StackNavigator. ¿Alguien más ha encontrado este extraño fenómeno?

O tal vez una mejor pregunta es: ¿cómo puedo diseñar mi encabezado y el color de fondo en React Navigation''s StackNavigator?

Answer 1

Usa el código de abajo para crear un encabezado de navegación personalizado

static navigationOptions = {
          title: ''Home'',
          headerTintColor: ''#ffffff'',
          headerStyle: {
            backgroundColor: ''#2F95D6'',
            borderBottomColor: ''#ffffff'',
            borderBottomWidth: 3,
          },
          headerTitleStyle: {
            fontSize: 18,
          },
      };

Answer 2

Este es un ejemplo de lo que estoy usando para cambiar el color de fondo de la tarjeta y el color de fondo y fuente del encabezado.

/*
1. Change React Navigation background color.
- change the style backgroundColor property in the StackNavigator component
- also add a cardStyle object to the Visual options config specifying a background color
*/

//your new background color
let myNewBackgroundColor = ''teal'';

const AppNavigator = StackNavigator({
  SomeLoginScreen: {
    screen: SomeLoginScreen
  }
}, {
      headerMode: ''screen'', 
      cardStyle: {backgroundColor: myNewBackgroundColor
   }
});

//add the new color to the style property
class App extends React.Component {
  render() {
    return ( 
     <AppNavigator style = {{backgroundColor: myNewBackgroundColor}} ref={nav => {this.navigator = nav;}}/>
    );
  }
}

/*
2. Change React Navigation Header background color and text color.
- change the StackNavigator navigationOptions 
*/

/*
its not clear in the docs but the tintColor 
changes the color of the text title in the 
header while a new style object changes the 
background color.
*/


//your new text color
let myNewTextColor = ''forestgreen'';

//your new header background color
let myNewHeaderBackgroundColor = ''pink'';

const AppNavigator = StackNavigator({
  SomeLoginScreen: {
    screen: SomeLoginScreen,
    navigationOptions: {
      title: ''Register'',
      header: {
        tintColor: myNewTextColor,
        style: {
          backgroundColor: myNewHeaderBackgroundColor
        }
      },
    }
  }
}, {
     headerMode: ''screen'',
     cardStyle:{backgroundColor:''red''
   }
});

Answer 3

Para diseñar el encabezado en React Navigation, use un objeto de encabezado dentro del objeto navigationOptions:

static navigationOptions = {  
  header: {
    titleStyle: {
     /* this only styles the title/text (font, color etc.)  */
    },
    style: {
     /* this will style the header, but does NOT change the text */
    },
    tintColor: {
      /* this will color your back and forward arrows or left and right icons */
    }
  }
}

Para diseñar el color de backgroundColor , solo debe configurar el color de backgroundColor en su aplicación, de lo contrario obtendrá el color predeterminado.

¡¡ACTUALIZAR!! A partir de mayo de 2017, beta9, las opciones de navegación ahora son planas.

Puedes leer sobre el cambio de ruptura aquí

Es necesario eliminar las claves de objeto del objeto de encabezado. Además, tenga en cuenta que han sido renombrados.

static navigationOptions = {
   title: ''some string title'',
   headerTitleStyle: {
      /*  */
   },
   headerStyle: {
      /*  */
   },
   headerTintColor: {
      /*  */
   },
}

Answer 4

Prueba este código.

 static navigationOptions = {
        title: ''KindleJoy - Kids Learning Center'',
        headerTintColor: ''#ffffff'',
        /*headerBackground: (
            <Image
                style={StyleSheet.absoluteFill}
                source={require(''./imgs/yr_logo.png'')}
            />
        ),*/
        headerStyle: {
            backgroundColor: ''#1d7110'',
            borderBottomColor: ''black'',
            borderBottomWidth: 0,
        },
        headerTitleStyle: {
            fontSize: 18,
        }
    };