删除Stack Navigator周围的左右“边距”

Question

我正在开发React-Native应用。它具有如下定义的堆栈导航器。

const App = createStackNavigator(
  {
    Home: { screen: Home },
    Login: { screen: Login },
    ...
    AvatarUploader: { screen: AvatarUploader },
  },
  {
    navigationOptions: {
      headerBackImage: <Image source={require('./src/assets/back.png')} />,
      headerStyle: {
        elevation: 0,       //remove shadow on Android
        shadowOpacity: 0,   //remove shadow on iOS
      },
      headerTitleStyle: styles.headerTitle,
    }
  }
);

export default App;

在第一个屏幕上房屋被渲染，房屋被渲染得很好。当我从下一个转到下一个时，标头的每一边都有70个点的边距，定义为“ left：70; right：70”，这些样式将通过道具传递到场景的<AnimatedComponent />中。如果我将react-devtools的值更改为0来删除它们，那么一切看起来都正确。不知道如何通过调整代码来删除这些代码。 在Android上，一切看起来都很好。

我该怎么做才能删除此左/右内容？目前，可能标头有效地占用宽度减去140点，这不好。 ;（

谢谢。

Answer 1

结果表明，iOS标头容器的默认设置不好。要修复，需要添加：

  headerTitleContainerStyle: {
    left: 0,
    right: 0
  }