最近写RN项目遇到很多问题!看了很多项目用到的react-navigation还是1.5.11的版本,遇到很多问题(忙了好几天才找到问题)比如在使用createBottomTabNavigator 和createStackNavigator 嵌套时候坑来了,标题设置不上去!伤脑子(使用的最新react-navigation 版本2.0.4)
const TabNavigator = createBottomTabNavigator({
Feed: Home,
Profile: Mine,
});
const AppNavigator = createStackNavigator({
Home: TabNavigator,
Settings: Detail,
});
//下面是首页设置的标题(我的界面一样的)
export default class Home extends Component {
static navigationOptions={
headerTitle:'首页'
}
render() {
return (
<Text>这是Home</Text>
);
}
}
没有标题
然后我再我给AppNavigator 这是导航栏信息出现但是不是我想要的效果!(但是还是不能单独在子控制器里面设置标题,这是更改TabNavigator在每一个路由的显示效果)
TabNavigator.navigationOptions = ({ navigation }) => {
let { routeName } = navigation.state.routes[navigation.state.index];
// 在这里你可以选择基于路由的名称
let headerTitle = routeName;
return {
headerTitle,
};
};
我想要是是给他的子类设置导航栏信息(然后想到把AppNavigator 的header给隐藏掉,先给每一个控制器加上导航栏在隐藏TabNavigator 的导航栏)
const FeedStack = createStackNavigator({
FeedHome: Home,
});
const ProfileStack = createStackNavigator({
ProfileHome: Mine,
});
const TabNavigator = createBottomTabNavigator({
Feed: FeedStack,
Profile: ProfileStack,
});
TabNavigator.navigationOptions = {
// 从堆栈AppNavigator隐藏标题
header: null,
};
const AppNavigator = createStackNavigator({
Home: TabNavigator,
Settings: Detail,
});
这样就完美的解决了!(解决子导航栏设置不上标题问题)
网友评论