reactjs - React-Navigation 在 tabNavigation 上显示动态标题
问题描述
我有这个代码:
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import HomeScreen from './modules/Home/HomeScreen';
import DetailScreen from './modules/Home/DetailScreen';
import React from 'react';
const tabNav = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
},
Details: { screen: DetailScreen },
},
);
//
tabNav.navigationOptions = ({ navigation }) => {
let { routeName } = navigation.state.routes[navigation.state.index];
console.log('navigation: ', navigation.state);
let title;
if (routeName === 'Home') {
title = 'Home';
} else if (routeName === 'Details') {
title = 'Detail';
}
return {
title,
headerMode: 'none',
};
};
//
const RootNavigator = createStackNavigator(
{
Main: tabNav,
},
{
navigationOptions: {
headerMode: 'none',
headerTransparent: true,
},
},
);
export default RootNavigator;
这是代码运行良好。
我的问题是,我想把这部分变成动态的。我试图把stackNavigator
标签放在里面,但一直给我返回错误。
if (routeName === 'Home') {
title = 'Home';
} else if (routeName === 'Details') {
title = 'Detail';
}
有什么建议吗?
更新:
我试图将 stackNavigator 放在我的屏幕中:
const tabNav = createBottomTabNavigator(
{
Home: createStackNavigator({
screen: HomeScreen,
navigationOptions: {
title: 'Home 2',
},
}),
Details: { screen: DetailScreen },
},
);
它不断地返回我The component for route 'navigationOptions' must be a React component.
解决方案
StackNavigator 配置错误,试试这个:
const tabNav = createBottomTabNavigator({
Home: {
screen: createStackNavigator({
homeSreen: {
screen: HomeScreen,
navigationOptions: {
title: 'Home 2',
},
},{
initialRouteName: 'homeScreen',
})
},
Details: { screen: DetailScreen },
});
或者
const HomeStack = createStackNavigator({
home: {
screen: HomeScreen,
navigationOptions: {
title: 'Home 2',
},
},
},{
initialRouteName: 'home',
});
const tabNav = createBottomTabNavigator({
Home: { screen: HomeStack },
Details: { screen: DetailScreen },
});
和
https://reactnavigation.org/docs/en/stack-navigator.html
您可以为每个屏幕设置标题:
const tabNav = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
title: 'Home',
},
},
Details: {
screen: DetailScreen,
navigationOptions: {
title: 'Details',
},
},
},
);
推荐阅读
- google-cloud-platform - 我是否会为在我关闭的项目中运行的 VM 实例付费?
- c++ - QPainter::drawImage 是阻塞调用吗?
- haskell - Haskell 流 - 如何在复制后将 1 个流分成 2 个?
- sed - 如何使用 SED(转置)重新排列数字
- typescript - 在 TypeScript 中键入 mapShape 函数
- sql-server - 为什么索引扫描用于不同的日期?某个日期,它将使用索引搜索
- r - 为什么 R 中的 all.equal 不测试每个观察值的差异,其中不匹配发生在容差量上,而不是聚合平均值?
- typescript - Typescript - 在我的界面中获取属性类型以避免使用任何
- xul - 无法在 Thunderbird 68.5.0 附加组件的 xul 对话框中触发 ondialogaccept 事件处理程序
- react-native - 导航回到开始屏幕