gpt4 book ai didi

react-native - React Native 和 React Navigation — 如何让屏幕标题显示在标题和底部选项卡导航器中

转载 作者:行者123 更新时间:2023-12-02 14:48:59 28 4
gpt4 key购买 nike

我正在自学 React Native 并构建一个相当简单的应用程序,irMobile .

我已经设置了每个屏幕(以“关于”屏幕为例)

static navigationOptions = () => ({
title: 'About'
})

在我的应用程序的主要组件中

const MainNavigator = createBottomTabNavigator({ About })
const StackNavigator = createStackNavigator({ MainNavigator })
const AppContainer = createAppContainer(StackNavigator)

然后在组件本身

  render() {
return (
<View style={styles.container}>
<AppContainer />
</View>
)
}

我的屏幕底部有一个漂亮的导航栏,但标题中没有任何标题,只有一个空白区域。

我已经完成了 the docs好几次想看看我错过了什么,我都被难住了。

如果我在 iOS 模拟器中使用检查器,我可以选择标题,它显示它是一个 View at x: 0, y: 44 with width: 375height: 43.7,所以我看不到它。

我已经尝试将 headerStyle 设置为 { backgroundColor: 'red' } 以查看我是否至少可以看到它,但没有。

screen snap of iPhone simulator showing header

但是,如果我更改 StackNavigator 以将 About 屏幕与 MainNavigator 一起放入其中,如下所示:

const StackNavigator = createStackNavigator({ About, MainNavigator })

然后我的标题按预期显示,但底部标签栏不再显示。

screensnap of iPhone showing header but missing tab navigator

所以这很令人困惑。

有关如何将标题和底部选项卡导航器放入同一个应用程序的文档有点含糊。显然,作为 React Native 菜鸟,我错过了一些非常明显和简单的东西。

我有什么不明白的,我该如何解决这个问题?

源代码位于 github.com/davesag/irMobile .

最佳答案

通过在组件内部设置 navigationOptions,您可以将其应用于调用该组件的导航元素。

因此在您的情况下,您在 About 中定义的标题适用于底部选项卡,而不是您希望的屏幕。

与其将 navigationOptions 设置为组件内的静态属性,不如在创建堆栈导航时直接定义它。

除此之外,我认为您希望将堆栈嵌套在底部选项卡导航中,而不是相反。通过这样做,您可以为每个屏幕设置不同的标题。

这是一个例子:

const AboutStack = createStackNavigator({ About: { screen: About, navigationOptions: { title: 'About Title' } } });
const CreditStack = createStackNavigator({ Credit: { screen: Credit, navigationOptions: { title: 'Credit Title' } } });

const MainNavigator = createBottomTabNavigator({
About: { screen: AboutStack, navigationOptions: { title: 'About Label' } },
Credit: { screen: CreditStack, navigationOptions: { title: 'Credit Label' } },
});

const AppContainer = createAppContainer(MainNavigator);

像这样,标题标题将是“关于标题”,标签标签将是“关于标签”。

关于react-native - React Native 和 React Navigation — 如何让屏幕标题显示在标题和底部选项卡导航器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56901946/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com