反应导航-在屏幕视图内渲染自定义标题

Question

使用React Navigation，我想使用header中的navigationOptions选项传递自定义标头组件。

问题在于标题是在屏幕视图之外呈现的。就我而言，我希望它成为屏幕ScrollView的一部分，并随屏幕一起向上滚动（不要在顶部保持粘性）。

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

有什么解决办法吗？

Answer 1

您可以这样做：

• 从反应导航中隐藏标题，然后将标题添加到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中呈现自定义标题组件。