react-native - 反应导航 - 在屏幕视图中呈现自定义标题

Question

使用 React Navigation，我想header使用navigationOptions.

问题是标题呈现在屏幕视图之外。在我的情况下，我希望它成为屏幕的一部分ScrollView，并与屏幕一起向上滚动（不要停留在顶部）。

我尝试设置header为nullin navigationOptions，并手动将标题组件放入屏幕的ScrollView中，但是这样我无法访问headerProps在使用header选项时传递给标题组件的那些。这些headerProps是访问前一个场景等内容所必需的。

有什么解决办法吗？

标签： react-nativereact-navigation

Answer 1

你可以这样做：

• 从react-navigation隐藏标题并将标题添加到 ScrollView 内的屏幕组件中：

  const SignedOut = createStackNavigator({
    SignIn: {
      screen: SignIn,
        navigationOptions: {
          header: () => null,
        },
      },
  });
  

  SignIn screen：

  class SignIn extends React.Component<Props, State> {
    render() {
      return (
        <ScrollView style={styles.container}>
         <! -- add header for screen and content -->
        </ScrollView>
      )
    }
  }
  export default SignIn;
  

通过这种方式，您可以在 ScrollView 中呈现自定义标题组件。