处于'后退模式'时，StackNavigator颜色会发生变化

Question

我有一个红色背景颜色的StackNavigator。当我单击按钮转到另一个页面时，导航栏的背景颜色从红色变为默认白色，后退按钮颜色为蓝色。这是预期的行为吗？如果是这样，有没有一个干净的解决方法？

这是我的代码：

class PageComponent extends Component {
  static navigationOptions = {
    title: 'page1',
    headerBackTitle: null,
    headerStyle: {
      backgroundColor: '#ff005c',
    },
    headerTitleStyle: {
      color: 'white' ,
    },
  };

  page2 = () => {
    const { navigate } = this.props.navigation;
    navigate('page2');
  }

  render() {
    return (
      <View>
        <Text>
          Feed page
        </Text>
        <Button onPress={this.page2} title='Go to page2' />
      </View>
    );
  }
}

const FeedPage = StackNavigator({
  Page: {
    screen: PageComponent
  },
  page2: {
    screen: Page2,
  }
});

PAGE2

const Page2 = TabNavigator({
  pagex: {
    screen: Pagex
  },
  pagey: {
    screen: Pagey
  },
  pagez: {
    screen: Pagez
  }
}, {
  tabBarPosition: 'top',
  animationEnabled: true,
  swipeEnabled: true,
});

export default BitePage;

Answer 1

看起来你想要制作默认的标题样式。

这也适用于孩子TabNavigator的标题。

Default Navigation Options的文件

const FeedPage = StackNavigator({
  Page: {
    screen: PageComponent
  },
  page2: {
    screen: Page2,
  }
}, {
    navigationOptions: {
        headerBackTitle: null,
        headerStyle: {
           backgroundColor: '#ff005c',
        },
        headerTitleStyle: {
           color: 'white' ,
        },
    }
});