我按照教程上的这个链接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
关于屏幕等。
以下是参考图片:
主屏幕
详细信息屏幕
1条答案
按热度按时间aemubtdh1#
我已经调整了您所遵循的文档,并对其进行了修改,以解释如何为屏幕获取
title
。https://callstack.github.io/react-native-paper/docs/guides/react-navigation