Question

我正在尝试在导航标题中显示标题组件，但它正在外部显示。蓝色的条形图应该替换顶部的白色矩形空间。

 render() {
    return (
      <View>
        <View
          style={{
            paddingTop: Constants.statusBarHeight
          }}
        >
          <Header leftComponent={{ text: "Delete Account" }} />
        </View>
        <ScrollView
          style={{ marginTop: 20 }}
          keyboardShouldPersistTaps="always"
        >
          <View
            style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
          ...
          </View>
        </ScrollView>
      </View>
    );
  }

Answer 1

您正在将marginTop添加到包含标题的视图中，这将标题向下移动50个边距，从视图中删除marginTop

<View>
  <Header leftComponent={{ text: 'Delete Account' }} />
</View>

您还需要使用具有centerComponent属性的placement将标题移到左侧，并在stackNavigator中隐藏标题

class AccountScreen extends React.Component {
  render() {
    return (
      <View style={{ marginTop: Constants.statusBarHeight }}>
        <Header placement="left" centerComponent={{ text: 'Delete Account' }} />
        <Text>Account Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Account: {
      screen: AccountScreen,
      navigationOptions: {
        header: null,
      },
    },
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Account',
  }
);

DEMO

Answer 2

如果要创建自己的标题栏（React本机元素），则必须从应用程序设置中完全隐藏React导航堆栈中的标题，或将其隐藏在特定屏幕上 Hide header in stack navigator React navigation

React Native Elements：如何在导航栏中显示标题组件？

2 个答案: