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

【问题标题】：Remove left/right "margins" around Stack Navigator删除 Stack Navigator 周围的左/右“边距”
【发布时间】：2018-10-14 15:49:09
【问题描述】：

我正在开发一个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 点边距，定义为“左：70；右：70”，并且这些样式正在道具中传递给我的场景的<AnimatedComponent />。如果我用 react-devtools 将值更改为 0 来删除它们，一切看起来都是正确的。不知道如何通过调整我的代码来删除它们。在 Android 上，一切看起来都不错。

我能做些什么来移除这个左/右的东西？目前，可能标题有效地占用宽度负140点，这并不好。 ;(

谢谢。

【问题讨论】：

标签： react-native react-native-ios

【解决方案1】：

事实证明，iOS 标头容器默认值并不好。要修复，需要添加：

  headerTitleContainerStyle: {
    left: 0,
    right: 0
  }

【讨论】：

感谢摩西！标题处的图像存在重大问题。事实证明，Android 和 iOS 以不同的方式处理事情。将正确的容器归零在两个操作系统中都是正确的。