Реагирование Навигация цвета фона и стиль StackNavigator

Question

Я довольно новичок в React Native, но у меня есть простое рабочее приложение с тремя сценами. Раньше я использовал Navigator, но он чувствовал себя лагги и был взволнован, чтобы попробовать React Navigation (как в https://reactnavigation.org/). После реализации React Navigation мой цвет фона переключился с белого на серый, а серый - на белый. Это странно и не должно быть связано. Однако я не изменил свои стили. Я только реализовал новую навигацию и изменил цвета. Когда я вернусь обратно к Navigator, мои цвета вернутся. Я использую StackNavigator. Кто-нибудь еще столкнулся с этим странным явлением?

Или, может быть, лучший вопрос: как мне настроить заголовок и цвет фона в StackNavigator React Navigation?

Answer 1

Чтобы стиль заголовка в Реагировать навигации использовать объект заголовка внутри 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 */ 
    } 
    } 
} 

Для стилизации backgroundColor, вам просто нужно установить backgroundColor в вашем приложении иначе вы получите цвет по умолчанию ,

UPDATE !! По состоянию на май 2017 года beta9 в navigationOptions теперь плоские

Вы можете прочитать о разрушающих изменениях здесь: https://github.com/react-community/react-navigation/releases/tag/v1.0.0-beta.9

Вы должны удалить ключи объекта от объекта заголовка. Также обратите внимание, что они были переименованы.

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

Answer 2

Вот пример того, что я использую, чтобы изменить цвет фона карты и фон заголовка и цвет шрифта.

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

Использование ниже кода для создания пользовательских навигации заголовок

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