headerStyle不会影响React-Native中的标头

时间:2019-03-24 10:09:30

标签: typescript react-native

我目前正在使用Typescript学习React-Native。 我正在做一个项目,却遇到了这个错误。

错误是颜色不影响我的标题。

我希望你们能帮助我:D

/ Viggo

index.tsx

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native';

import AddCity from './components/AddCity/AddCity'
import Cities from './components/Cities/Cities'
import City from './components/Cities/City'
import { createAppContainer } from 'react-navigation'
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
import { colors } from './theme'

const CitiesNav = createStackNavigator({
    Cities: { screen: Cities },
    City: { screen: City }
}, {
    navigationOptions: {
        headerStyle: {
            backgroundColor: colors.primary
        },
        headerTintColor: '#8e44ad'
    }
})

const Tabs = createBottomTabNavigator({
    Cities: { screen: CitiesNav },
    AddCity: { screen: AddCity }
})

const App = createAppContainer(Tabs);

export default App;

theme.tsx

const colors = {
    primary: '#D81B60',
}

export { 
    colors
}

1 个答案:

答案 0 :(得分:0)

只需尝试使用defaultNavigationOptions而不是navigationOptions。希望它能工作

 defaultNavigationOptions: {
    headerStyle: {
        backgroundColor: colors.primary
    },
    headerTintColor: '#8e44ad'
}