移除 Stack Navigator 周围的 left/right "margins"

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 上，一切看起来都不错。

我该怎么做才能删除这个 left/right 东西？目前，may header 有效地使宽度减去 140 磅，这是不好的。 ;(

谢谢。

Answer 1

原来 iOS header 容器默认值不好。要修复，需要添加：

  headerTitleContainerStyle: {
    left: 0,
    right: 0
  }

移除 Stack Navigator 周围的 left/right "margins"

Remove left/right "margins" around Stack Navigator

react-native

react-native-ios