我在标题的右侧有一个图标,按下该按钮,我想导航到另一个屏幕。
我已经为此进行了很多搜索,但是所有解决方案都是针对类组件的,尚无官方文档。
我正在使用React Native版本0.61.4。
按下右侧标题中的图标,我要移动'ProfileScreen'。所有其他导航均正常运行。我在“ HomeScreen”中有一个按钮可以移至“ ResultsScreen”,但无法从标题转到“ ProfileScreen”。
这是我的代码段
const Stack = createStackNavigator();
const App = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={
{
title: 'Home',
headerStyle: {
backgroundColor: '#273469',
},
headerTintColor: '#EBF2FA',
headerRight: () => (
<Icon
onPress={() => navigate('ProfileScreen')}
name="edit"
type="material"
/>
),
}
}
/>
<Stack.Screen
name="ResultsScreen"
component={ResultsScreen}
/>
<Stack.Screen
name="ProfileScreen"
component={ProfileScreen}
/>
</Stack.Navigator>
</NavigationContainer>
</SafeAreaView>
)
}
[options
可以将一个函数作为参数,而此函数将prop
作为参数。
这里是TypeScript的定义信息:
* Navigator options for this screen.
*/
options?: ScreenOptions | ((props: {
route: RouteProp<ParamList, RouteName>;
navigation: any;
}) => ScreenOptions);
您可以看到道具,包含navigation
对象,您可以使用它来调用导航,如下所示:
options={({ navigation }) => ({
title: 'Home',
headerStyle: {
backgroundColor: '#273469',
},
headerTintColor: '#EBF2FA',
headerRight: () => (
<Icon
onPress={() => navigation.navigate('ProfileScreen')}
name="edit"
type="material"
/>
),
})}