如何使用导航器代码上的 headerRight 导航到其他屏幕?
How to navigate to other screen using the headerRight on the navigator code?
标题很乱,但我给出的解释会更清楚。
我正在为我的应用程序创建一个 StackNavigator,并且我正在定义一个图标以显示在我的其中一个屏幕的 header 上,如下所示:
const navigator= createStackNavigator(
{
Initial: {
screen: Posts,
navigationOptions: {
title: "All Posts",
headerRight: () => {
return (
<TouchableOpacity style={{ padding: 5 }}>
<Feather name={"plus"} size={30} />
</TouchableOpacity>
);
},
},
},
Details: Details,
Create: Create,
},
{
initialRouteName: "Initial",
}
);
const App = createAppContainer(navigator);
export default () => {
return (
<Provider>
<App />
</Provider>
);
};
问题是当用户按下我在 header 右侧呈现的图标时,我想将用户导航到 Create 屏幕,但我不知道如何访问导航器为所有屏幕生成的 navigation.navigate() 函数。我知道我可以在帖子的屏幕文件上定义 header,所以我可以访问 navigation.navigate() 函数,但我想知道是否在 App.js 文件中有一些方法可以做到这一点。
编辑
阅读文档后我发现我创建导航器的方式不是官方文档推荐的方式。我通过一门旧课程学会了这样做,使用 React Navigation 4.x,现在使用 React Navigation 6.x 我察觉到创作的不同并改变了我在我的应用程序上做这件事的方式.您可以查看我遇到的问题的文档 here
您可以通过发送道具以这种方式准备您的导航选项
options={(props) => ({
headerRight: () => <TouchableOpacity
onPress={()=>props.navigation.navigate('Screen')} style={{ padding: 5 }}>
<Feather name={"plus"} size={30} />
</TouchableOpacity>
})}
标题很乱,但我给出的解释会更清楚。 我正在为我的应用程序创建一个 StackNavigator,并且我正在定义一个图标以显示在我的其中一个屏幕的 header 上,如下所示:
const navigator= createStackNavigator(
{
Initial: {
screen: Posts,
navigationOptions: {
title: "All Posts",
headerRight: () => {
return (
<TouchableOpacity style={{ padding: 5 }}>
<Feather name={"plus"} size={30} />
</TouchableOpacity>
);
},
},
},
Details: Details,
Create: Create,
},
{
initialRouteName: "Initial",
}
);
const App = createAppContainer(navigator);
export default () => {
return (
<Provider>
<App />
</Provider>
);
};
问题是当用户按下我在 header 右侧呈现的图标时,我想将用户导航到 Create 屏幕,但我不知道如何访问导航器为所有屏幕生成的 navigation.navigate() 函数。我知道我可以在帖子的屏幕文件上定义 header,所以我可以访问 navigation.navigate() 函数,但我想知道是否在 App.js 文件中有一些方法可以做到这一点。
编辑
阅读文档后我发现我创建导航器的方式不是官方文档推荐的方式。我通过一门旧课程学会了这样做,使用 React Navigation 4.x,现在使用 React Navigation 6.x 我察觉到创作的不同并改变了我在我的应用程序上做这件事的方式.您可以查看我遇到的问题的文档 here
您可以通过发送道具以这种方式准备您的导航选项
options={(props) => ({
headerRight: () => <TouchableOpacity
onPress={()=>props.navigation.navigate('Screen')} style={{ padding: 5 }}>
<Feather name={"plus"} size={30} />
</TouchableOpacity>
})}