React Gezinti Arka plan renkleri ve stil geçişi StackNavigator

Question

React Native için oldukça yeni oldum, ancak üç sahne ile basit bir çalışma uygulamasına sahibim. Daha önce Navigator kullanıyordum ama laggy hissettim ve React Navigation'ı denemek için heyecanlandı (https://reactnavigation.org/'da olduğu gibi). React Navigation'ı uyguladıktan sonra, arka plan rengim beyazdan griye ve griden beyaza değişti. Bu garip ve ilgili olmamalı. Ancak stilleri değiştirmedim. Sadece yeni navigasyonu uyguladım ve renkler değişti. Navigator'a geri döndüğümde renklerim geri döner. StackNavigator kullanıyorum. Bu garip fenomenle başka biri karşılaştı mı?

Ya da belki daha iyi bir soru: React Navigation's StackNavigator'da başlığımı ve arka plan rengimi nasıl değiştirebilirim?

Answer 1

Navigasyon navigationOptions içinde bir başlık nesnesini kullanın tepki de başlığını şekillendirmek için itiraz:

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

backgroundColor stil için, sadece aksi takdirde varsayılan renk elde edersiniz uygulamanızda backgroundColor ayarlamanız gerekir .

UPDATE !! Sen başlık nesneden nesne anahtarlarını kaldırmak gerekir https://github.com/react-community/react-navigation/releases/tag/v1.0.0-beta.9

: May 2017 beta9 itibariyle navigationOptions şimdi

Burada kırılma değişiklikle ilgili okuyabilir düz. Ayrıca, bildirilenler yeniden adlandırıldı.

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

Answer 2

Kart arka plan rengini ve Başlık arka planını ve yazı tipi rengini değiştirmek için kullandığım şeylerin bir örneği. kodunun altına

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

Kullanım özel bir gezinme başlık oluşturmak için

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