React Navigation zmienia kolory tła i stylowanie StackNavigator

Question

Jestem dość nowy, aby React Native, ale mam prostą działającą aplikację z trzema scenami. Wcześniej korzystałem z Navigatora, ale czułem się niepewnie i byłem podekscytowany wypróbowaniem React Navigation (jak w https://reactnavigation.org/). Po wdrożeniu React Navigation kolor tła zmieniał się z białego na szary, a kolor szary na biały. To dziwne i nie powinno być ze sobą powiązane. Jednak nie zmieniłem swoich stylów. Zaimplementowałem tylko nową nawigację i zmieniono kolory. Kiedy wracam do Nawigatora, moje kolory powracają. Używam StackNavigator. Czy ktokolwiek inny napotkał to dziwne zjawisko?

A może lepszym pytaniem jest: w jaki sposób ustawić nagłówek i kolor tła w aplikacji StackNavigator React Navigation?

Answer 1

Aby styl nagłówka w React Nawigacja używać obiektu nagłówka wewnątrz navigationOptions obiektu:

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 */ 
    } 
    } 
} 

Do stylizacji backgroundColor, wystarczy ustawić backgroundColor w aplikacji inaczej dostaniesz domyślny kolor .

AKTUALIZACJA !! Począwszy od maja 2017 beta9 się navigationOptions są teraz mieszkania

Można przeczytać o łamanie zmian tutaj: https://github.com/react-community/react-navigation/releases/tag/v1.0.0-beta.9

trzeba wyjąć kluczyki obiektu od obiektu nagłówka. Zauważ też, że zostały one zmienione.

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

Answer 2

Oto przykład tego, co używam do zmiany koloru tła karty oraz tła nagłówka i koloru czcionki.

/* 
 
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 ( 
 
    \t <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

skorzystać z poniższego kodu, aby utworzyć niestandardowy nagłówek nawigacyjnego

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