Soy bastante nuevo en React Native, pero tengo una aplicación de trabajo simple con tres escenas. Anteriormente estaba usando Navigator, pero me sentí lento y me entusiasmó probar React Navigation (como en https://reactnavigation.org/). Después de implementar React Navigation, mi color de fondo cambió de blanco a gris, y de 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 cambiaron. Cuando vuelvo a Navigator, 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 estilo mi encabezado y color de fondo en React Navigation StackNavigator?

20
Turnipdabeets 16 feb. 2017 a las 01:08

5 respuestas

La mejor respuesta

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 backgroundColor, solo necesita configurar el backgroundColor en su aplicación, de lo contrario obtendrá el color predeterminado.

¡ACTUALIZACIÓN! A partir de mayo de 2017 beta9, las opciones de navegación ahora son planas

Puede leer sobre el cambio importante aquí

Debe eliminar las claves de objeto del objeto de encabezado. Además, observe que han sido renombrados.

static navigationOptions = {
   title: 'some string title',
   headerTitleStyle: {
      /*  */
   },
   headerStyle: {
      /*  */
   },
   headerTintColor: {
      /*  */
   },
}
56
Turnipdabeets 24 may. 2018 a las 21:15

Use el siguiente código para crear un encabezado de navegación personalizado

static navigationOptions = {
          title: 'Home',
          headerTintColor: '#ffffff',
          headerStyle: {
            backgroundColor: '#2F95D6',
            borderBottomColor: '#ffffff',
            borderBottomWidth: 3,
          },
          headerTitleStyle: {
            fontSize: 18,
          },
      };
4
omprakash8080 18 ene. 2018 a las 12:31

Ok, nada funcionó para mí, así que logré encontrar mi propia solución

static navigationOptions = ({ navigation, screenProps }) => ({
        headerLeft: (
              <NavBackButton onPress={() => { navigation.goBack(); }} />
        ),headerStyle: {
            backgroundColor: CLColors.MAIN_BLUE
        }, 
        headerTitle: <Text style={[CLStyles.H6MEDIUM_WHITE, {marginLeft:8}]}>Profile</Text>
        , footer: null,
     });

headerTitle hará la magia para colocar un elemento personalizado Text aquí.

headerStyle hará la magia para cambiar el color de fondo de su barra de navegación.

headerLeft te ayudará a personalizar tu botón de retroceso.

0
Jay Mayu 10 mar. 2020 a las 02:54

Aquí hay un ejemplo de lo que estoy usando para cambiar el color de fondo de la tarjeta y el fondo del encabezado y el color de la fuente.

/*
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'
   }
});
22
vmarquet 27 jun. 2019 a las 04:23

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,
        }
    };
2
Yogesh Rathi 25 jul. 2018 a las 10:17