如何在React Navigation和React Native Paper中更改自定义标题?

uqxowvwt  于 2023-03-31  发布在  React
关注(0)|答案(1)|浏览(173)

我按照教程上的这个链接https://callstack.github.io/react-native-paper/docs/guides/react-navigation/#adding-appbar供您参考。
我有一个来自React Native Paper的自定义头AppHeader。下面是代码:

import { Appbar } from 'react-native-paper';

const AppHeader = ({ navigation, back }) => {

    const _goBack = () => navigation.pop();

    const _handleProfile = () => navigation.navigate('Profile');

    const _handleMore = () => console.log('Shown more');

    return (
        <Appbar.Header>
            {back ? <Appbar.BackAction onPress={_goBack} /> : null}
            <Appbar.Content title='This is my sample title' />
            <Appbar.Action icon="account-circle-outline" onPress={_handleProfile} />
            <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
        </Appbar.Header>
    )
}

下面是App.js上的导航代码:

import AppHeader from './components/AppHeader';

const App = () => {

  return (
    <PaperProvider theme={theme}>
      <NavigationContainer theme={LightTheme}>
        <Stack.Navigator
          initialRouteName="Home"
          screenOptions={{
            header: (props) => <AppHeader {...props} />,
            ...TransitionPresets.FadeFromBottomAndroid,
          }}
        >
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Details" component={DetailsScreen} />
          <Stack.Screen name="About" component={AboutScreen} />
          <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>

  );
}

我有三个不同的屏幕,使用导航标题,我如何改变标题(在这种情况下This is my sample title的标题,我想取决于屏幕?例如改变标题Home时,在主屏幕,About关于屏幕等。
以下是参考图片:
主屏幕

详细信息屏幕

aemubtdh

aemubtdh1#

我已经调整了您所遵循的文档,并对其进行了修改,以解释如何为屏幕获取title
https://callstack.github.io/react-native-paper/docs/guides/react-navigation

相关问题