导航器

官网： reactnavigation.org/

yarn add @react-navigation/native

# 依赖库:
yarn add  react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view


# IOS 
npx pod-install ios
cd ios
pod install

具体导航

yarn add react-navigation
yarn add react-navigation-stack  # 顶部导航栏
yarn add react-navigation-tabs  # tabbar

# IOS 
cd ios
pod install

顶部导航

import { createAppContainer } from 'react-navigation'

import  { createStackNavigator } from 'react-navigation-stack'


import Home from './src/Home'
import About from './src/About'

var RootStack = createStackNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        title: '首页',  // 标题
        headerBackTitle: '自定义返回标题', // 需要在页面跳转的上一级设置
        headerStyle: {
          backgroundColor: 'green' // 背景色
          
        },
        headerTintColor: '#fff' ,//前景色
        headerTitleStyle: {
        
        	fontSize: 20  // 文字大小
        },
        headerLift: () => {
        	return (
            	<Button title='设置' />
            )
        }
      }
    },
    About: {
      screen: About,
      navigationOptions: {
        // title: 'About',
        headerBackTitle: '自定义返回标题',
      }
    }
  },
  {
    initialRouteName: 'Home', // 默认显示页面
    defaultNavigationOptions: { // 默认全局设置
      headerStyle: {
        backgroundColor: 'yellow',
      },
      headerTitleStyle: {
            color: 'whit'
      }
    }
  }
);

// 隐藏 tabbar
RootStack.navigationOptions = ({navigation}) => {
	let tabBarVisible = true
    if(navigation.state.index > 0){
    	tabBarVisible = false
    }
    return tabBarVisible;
}

class App extends Component {

  render() {
    RootStack = createAppContainer(RootStack)
    return <RootStack />
  }
}

页面跳转(传参)

<Button title='跳转详情页' onPress={()=>{
  this.props.navigation.navigate('About',{
         id: 1,
         name: '这是传递的数据'
     })  // 如果有,则回到该组件,如果没有 则创建该组件压栈
     
   // 或者 this.props.navigation.push() 创建一个新的组件 压栈
   
   this.props.navigation.goBack()  // 回到上一个页面
   this.props.navigation.popToTop // 回到首页组件
   
  }}
/>

接受参数和自定义导航标题

class About extends Component {
    static navigationOptions = (props) => {
        //  可以拿到传递的参数
        const { navigation } = props
        const { state: { id }} = navigation
        return {
            title: '页面内设置标题',
            headerRight: (
                <Button title='保存' onPress={() => {
						 navigation.navigate('Cart') // 页面间跳转
                }} />
            )
        }
    }
    render() {
        return (
            <View>
                <Text>About</Text>
            </View>
        )
    }
}

底部导航

import { createAppContainer } from 'react-navigation'
import { createBottomTabNavigator } from 'react-navigation-tabs'
// 字体库
import Icon from 'react-native-vector-icons/FontAwesome'

var BottomTabNavigators = createBottomTabNavigator(
  {
      Home: {
        screen: About,
        navigationOptions:{
          title: '首页'
        }
      },
      About: {
        screen: Home,
        navigationOptions:{
          tabBarLabel: '关于'
        }
      },
      Cart: {
        screen: Cart,
        navigationOptions:{
          title: '购物车'
        }
      } 
  },
  {
    trueinitialRouteName: Home, // 首屏渲染也买你
    lazy: true , // 是否懒加载
    order: ['Cart','Home','About'], // 排序
    initialRouteName: 'Home', // 默认显示页面
    defaultNavigationOptions:() => ({  // 设置导航样式
        tabBarIcon: ({focused, tintColor, horizontal}) => {
        const { routeName } = navigation.state
         // focused  是否选中
       let iconName 
       if(iconName == "Home"){
        iconName = 'envelope-o'
       }else if(iconName == "About"){
        iconName = 'user'
       }else{
        iconName = 'cog'
       }

        return <Icon name={iconName} size={20} color={tintColor} />
      }
    }),
    animationEnabled: false, // 切换页面时是否有动画效果
    tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
    swipeEnabled: true, // 是否可以左右滑动切换tab
    backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
    tabBarOptions: {
        activeTintColor: '#47aaff', // 文字和图片选中颜色
        activeBackgroundColor: 活动选项卡的背景色,
        inactiveTintColor: '#000', // 文字和图片未选中颜色
        inactiveBackgroundColor: 非活动选项卡的背景色,
        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
        showLabel: false, // 是否显示文字
        indicatorStyle: {
            height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
        },
        style: {
            backgroundColor: '#fff', // TabBar 背景色
            height: 50,
        },
        labelStyle: {
            fontSize: 12, // 文字大小,
            margin:0,
        },
    },
    pressColor:'material',
}
)
class App extends Component {

  render() {
    RootStack = createAppContainer(BottomTabNavigators);
    return <RootStack />
  }
}

欢迎页

import { createAppContainer, createSwitchNavigator } from 'react-navigation'

import  { createStackNavigator } from 'react-navigation-stack'

const AppInitNavigator = createStackNavigator({
  welcome: {
    screen: WelcomePage , // 欢迎页
    navigationOptions: {
      header: null // 隐藏导航栏
    }
  }
})

/**
 * 在Welcome页面跳转到主页 this.props.navigation.navigate("Main")
 * */  


const switchNavigator = createSwitchNavigator({
    Init: AppInitNavigator,
    Main: BottomTabNavigators // 包含Tabbar的数组页面
})


class App extends Component {

  render() {
    RootStack = createAppContainer(switchNavigator);
    return <RootStack />
  }
}