StackNavigator 颜色在 'back mode' 时发生变化

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,
  }
});

第2页

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

export default BitePage;

Answer 1

您似乎想要设为默认 header 样式。

这也适用于 child TabNavigator 的 header。

Default Navigation Options

的文档

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

StackNavigator 颜色在 'back mode' 时发生变化

StackNavigator color changes when in 'back mode'

react-native

react-navigation