导航使用

react-native 导航使用 React Navigation 官网地址为 https://reactnavigation.org/

文章使用的是4.0版本 目前已经更新到5.0

常用的底部导航 及切换导航

 首页引入依赖

"react-native-gesture-handler": "^1.0",
    "react-native-reanimated": "^1.13.1",
    "react-native-screens": "^2.11.0",
    "react-navigation": "^4.4.2",
    "react-navigation-stack": "^1.8.1",
    "react-navigation-tabs": "^2.10.1",

　　

实例：底部导航使用方式

import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack'
import User from '../user'
import Info from '../info'
import Home from '../home'

import Demo from '../demo'

const HomeStack = createStackNavigator({
  User: { screen: User, params: {} },
  Info: { screen: Info, params: {} },
});
const HomeStack1 = createStackNavigator({
  Demo: { screen: Demo, params: {} },
  Home: { screen: Home, params: {} },
});

const RouteConfigs = {
  User: HomeStack,
  Home: HomeStack1
}
const TabNavigatorConfig = {
  initialRouteName: 'User',
  tabBarPosition: 'bottom',
  animationEnabled: true,
  lazy: true,
  // tabBarComponent: props => (<CustomTabbarComponent />)
}

const TabNav = createBottomTabNavigator(
  RouteConfigs,
  TabNavigatorConfig
)

export default TabNav

　　底部导航将不显示的导航归类放入子导航中

 

普通导航切换

import User from '../user'
import Info from '../info'
import TabNav from '../home';
import { createStackNavigator } from 'react-navigation-stack'
const AppNavigator = createStackNavigator({
    Home: {
        screen: TabNav,
    },
    User: {
        screen: User,
    },
    Details: {
        screen: Info,
    }
}, {
        initialRouteName: 'User',
});
export default AppNavigator;

　　

APP中处理逻辑获取组件

import React ,{ Component  } from 'react';
import { createAppContainer, StackActions, NavigationActions } from 'react-navigation';
import AppNavigator from './views/nav'
import BottomNavigator from './views/tababr'
import {Provider} from 'react-redux'
import configureStore from './store'
let store = configureStore();


const App = createAppContainer(BottomNavigator);
class APP extends Component{
    render(h) {
        return (
            <Provider store={store}>
                <App />
            </Provider>
        )
    }
} 
export default APP