将标题从 React Native 导航传递给标题组件答案

【问题标题】：Passing title from React Native navigation to Header Component将标题从 React Native 导航传递给标题组件
【发布时间】：2020-06-20 13:23:54
【问题描述】：

我试图将每个页面的标题从反应导航传递到标题组件，但没有运气。我很确定我正在正确发送道具，但我不知道如何使用我尝试使用 {props.headerTitle} 但没有运气。

标题组件：

export default function Header() {
  return (
    <View style={styles.header}>
      <Text>{props.headerTitle}</Text>
    </View>
  );
}

导航

<AuthStack.Navigator initialRouteName={RegisterLogin}>
            <AuthStack.Screen
              name="RegisterLogin"
              component={RegisterLogin}
              options={({navigation, route}) => ({
                headerShown: false,
                headerTitle: (props) => <Header {...props} />,
                headerStyle: {
                  backgroundColor: 'red',
                  elevation: 0,
                  shadowOpacity: 0,
                  borderBottomWidth: 0,
                },
              })}
            />
            <AuthStack.Screen
              name="Login"
              component={LoginWithContext}
              options={({navigation, route}) => ({
                headerTitle: (props) => <Header {...props} />,
                headerStyle: {
                  backgroundColor: 'red',
                  elevation: 0,
                  shadowOpacity: 0,
                  borderBottomWidth: 0,
                },
              })}
            />

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

我不太确定您要完成什么。当您像这样设置标题选项时，React Navigation 标题默认显示页面标题：

<AuthStack.Screen
    name="RegisterLogin"
    component={RegisterLogin}
    options={{
        title: 'Your title here',
        headerStyle: {
            backgroundColor: 'red',
            elevation: 0,
            shadowOpacity: 0,
            borderBottomWidth: 0,
        }
    }}
/>

这里有你想要的不同行为吗？

编辑：假设您尝试将标题传递给标题组件以进行进一步的自定义行为，您可以这样做：

// Header Component
function Header({children}) {
    return (
        <View>
            <Text>{children}</Text>
        </View>
    );
}
// In your navigator
<AuthStack.Screen
    name="RegisterLogin"
    component={RegisterLogin}
    options={{
        title: 'Your title here',
        headerTitle: (children) => <Header {...children}/>,
        headerStyle: {
            backgroundColor: 'red',
            elevation: 0,
            shadowOpacity: 0,
            borderBottomWidth: 0,
        }
    }}
/>

请参阅headerTitle:https://reactnavigation.org/docs/stack-navigator/#headertitle 上的文档

【讨论】：

实际上是的，当我可以这样做时，我想我想多了一个简单的问题。谢谢。