时间戳

首页 > 解决方案 > 反应导航混合导航

react-native - 反应导航混合导航

问题描述

我使用 react-navigation 来构建我的应用程序，我想要标签和堆栈导航，所以我这样做了：

const FindPage =  StackNavigator({
  Find: {
    screen: Find,
  },
  Item:{
    screen:Item
  }
}, {
  initialRouteName: 'Find',
});

const ProfilePage =  StackNavigator({
  Profile: {
    screen: Profile,
  },
  Item:{
    screen:Item
  }
}, {
  initialRouteName: 'Profile',
});

const MyApp = createBottomTabNavigator({
  Find: FindPage,
  Profile: ProfilePage
}
});

const auth = StackNavigator({
  Login:{
    screen: Login,
  },
  Register:{
    screen: Register,
  },
  Main:{
    screen: MyApp,
  }
},{
  initialRouteName: 'Main',
  headerMode: 'none'
});

export default auth;

但我不明白。这是屏幕截图给出的： 在此处输入图像描述

如果您在标签导航中使用 stacknavigation 时看到标签丢失了标签图标和字体，这在另一个版本的反应导航中对我有用，并且在网络上找不到任何东西请帮助！

标签： react-nativereact-navigation

解决方案

使用 reactnavigation2 你可以在下面的代码中实现这一点在这里阅读更多关于它的信息https://reactnavigation.org/docs/en/bottom-tab-navigator.html

import Ionicions from "react-native-vector-icons/Ionicons";


screen: createBottomTabNavigator(
        {
          HomeScreen: {
            screen: HomeStack,
            navigationOptions: {
              tabBarLabel: props => <Label name="Home" {...props} />,
              tabBarIcon: props => (
                <Icon name="ios-home-outline" fillname="ios-home" {...props} />
              )
            }
          }
       })

推荐阅读