在react-native中使用navigationOptions

Question

我在组件中使用navigatioinOptions。

问题是当我使用navigationOptions时，空间总是在离开。

这是我的代码：

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

我附上了图片文件。

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

Answer 1

假设您的屏幕截图仅代表headerLeft，因此布局不符合典型的headerLeft | title | headerRight排列，我建议您将所有这些元素单独移动到header。这样你就可以拥有你所需要的所有空间，即：

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

看起来像：

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