在 react-native 中使用 navigationOptions

Question

我在组件中使用 navigatioinOptions。

问题是 space 在我使用导航选项时总是离开。

这是我的代码：

static navigationOptions = ({ navigation }) => {
return {
  headerLeft: ...
  }
}

我已附上图片文件。

请帮助我。谢谢你的时间。

Answer 1

假设您的屏幕截图仅代表 headerLeft，因此布局不符合典型的 headerLeft|title|headerRight 排列，我建议您将所有那些元素单独变成 header 。这样一来，您将拥有整个 space 所需的一切，即：

static navigationOptions = ({ navigation }) => {
  return {
    header: (
      <View
        style={{
          backgroundColor: "red",
          paddingTop: 21,
        }}
      >
        <View style={{ backgroundColor: "yellow" }}>
          <Text>This is 100% wide</Text>
        </View>
      </View>
    ),
  };
};

看起来像：

请注意，以这种方式使用 header 时，您需要自己处理所有特定于平台的样式。您可能会发现 Header.js' source code 对此有帮助。

在 react-native 中使用 navigationOptions

Use navigationOptions in react-native

react-native

react-navigation