React-Native实战项目-导航器篇（一）

前言：官方文档已经看了一遍，但印象不是很深，于是在mooc上找了个实战学习项目做一做。

本篇目录：

---

基础导航练习√

1.ReactNavigation之createStackNavigator导航器案例练习

相关资料：

练习链接：http://www.devio.org/2018/12/24/createStackNavigator/

React Navigationan官网：https://reactnavigation.org/docs/zh-Hans/getting-started.html

1.  初始化react native项目

react-native init react_navigation_demo

2.  在项目目录下安装reactnavigation这个包 

yarn add react-navigation

3.  安装依赖

yarn add react-native-reanimated react-native-gesture-handler react-native-screens

4. 版本更新后，此步骤忽略。

5.  新建并配置路由文件navigator/navigators.js

 

6.  新建页面文件夹Page，构建HomePage.js,Page1.js,Page2.js,Page3.js,Page4.js,Page5.js等页面

HomePage.js

import React,{Component} from 'react';
import {Button ,View,Text,StyleSheet} from 'react-native';

export default class HomePage extends Component{
    render(){
        const {navigation}=this.props; //获取navigation
        return(
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome To HomePage</Text>
                <Button title={'Go to Page1'} onPress={()=>{
                    navigation.navigate('Page1',{name:'动态的'});//跳转页面，并且允许传递参数
                }} />
                <Button title={'Go to Page2'} onPress={()=>{
                    navigation.navigate('Page2');
                }} />
                <Button title={'Go to Page3'} onPress={()=>{
                    navigation.navigate('Page3',{name:'动态的'});
                }} />
            </View>
        )
    }
}
const styles=StyleSheet.create({
    container:{
        flex:1,
    },
    welcome:{
        fontSize:20,
        textAlign:'center',
        margin:10,
    }
});

Page1.js

import React from 'react';
import {Button,View,Text,StyleSheet} from 'react-native';


export default class Page1 extends React.Component{
    render(){
        const {navigation}=this.props;
        return(
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome To Page1</Text>
                <Button
                    title={'Go Back'}
                    onPress={()=>{
                        navigation.goBack();
                    }}
                />
                <Button
                    title={'Go TO Page4'}
                    onPress={()=>{
                        navigation.navigate('Page4');
                    }}
                />
            </View>
        )
    }
}

const styles=StyleSheet.create({
    container:{
        flex:1,
    },
    welcome:{
        fontSize:20,
        textAlign:'center',
        margin:10,
    }
});

Page2.js

import React from 'react';
import {View,Text,StyleSheet} from 'react-native';


export default class Page2 extends React.Component{
    render(){
        const {navigation}=this.props;
        return(
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome To Page2</Text>
            </View>
        )
    }
}
const styles=StyleSheet.create({
    container:{
        flex:1,
    },
    welcome:{
        fontSize:20,
        textAlign:'center',
        margin:10,
    }
});

 

7.  修改根目录下的APP.js,将路由导入

import React from 'react';
import AppContainer from './navigation/navigators.js'//导入路由文件

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

 

8.  启动连接虚拟手机，用react-native run-android编译运行代码

 

2.ReactNavigation之createBottomTabNavigator和createMaterialTopTabNavigator导航器案例练习

·导入createBottomTabNavigator和createMaterialTopTabNavigator导航器及矢量图标库

import {createBottomTabNavigator,createMaterialTopTabNavigator} from 'react-navigation-tabs';//底部导航及头部导航器
import Ionicons from 'react-native-vector-icons/Ionicons';//矢量图标库
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';//矢量图标库

·编写代码

const AppBottomNavigator =createBottomTabNavigator({
    Page1:{
        screen:Page1,
        navigationOptions:{
            tabBarLabel:'最热',
            tabBarIcon:({tinColor,focused})=>(
                <Ionicons
                    name={"ios-home"}
                    size={26}
                    style={{color:tinColor}} 
                />
            )

        }

    },
    Page2:{
        screen:Page2,
        navigationOptions:{
            tabBarLabel:'趋势',
            tabBarIcon:({tinColor,focused})=>(
                <Ionicons
                    name={"ios-people"}
                    size={26}
                    style={{color:tinColor}} 
                />
            )
        }

    },
    Page3:{
        screen:Page3,
        navigationOptions:{
            tabBarLabel:'收藏',
            tabBarIcon:({tinColor,focused})=>(
                <Ionicons
                    name={"ios-chatboxes"}
                    size={26}
                    style={{color:tinColor}} 
                />
            )
        }

    },
    Page4:{
        screen:Page4,
        navigationOptions:{
            tabBarLabel:'我的',
            tabBarIcon:({tinColor,focused})=>(
                <Ionicons
                    name={"ios-car"}
                    size={26}
                    style={{color:tinColor}} 
                />
            )
        }

    },
  
},{
    tabBarOptions:{
       activeTintColor:Platform.OS==='ios'?'#e91e63':'fff',
    }
});

const AppTopNavigator =createMaterialTopTabNavigator({
    Page1:{
        screen:Page1,
        navigationOptions:{
            tabBarLabel:'ALL'//顶部导航项
        }

    },
    Page2:{
        screen:Page2,
        navigationOptions:{
            tabBarLabel:'IOS'//顶部导航项
        }

    },
    Page3:{
        screen:Page3,
        navigationOptions:{
            tabBarLabel:'React'//顶部导航项
        }

    },
    Page4:{
        screen:Page4,
        navigationOptions:{
            tabBarLabel:'React Native'//顶部导航项
        }

    },
    Page5:{
        screen:Page5,
        navigationOptions:{
            tabBarLabel:'TI实验室'//顶部导航项
        }

    },
},{
    tabBarOptions:{
        tabStyle:{minWidth:50,},//顶部导航项的最小宽
        upperCaseLabel:false,//是否使标签大写，默认为true
        scrollEnabled:true,//允许滑动切换标签
        style:{
            backgroundColor:"#678" //TabBar的背景色

        },
        indicatorStyle:{
            height:2,
            backgroundColor:"white",
        },//标签指示器样式
        labelStyle:{
            fontSize:13,
            marginTop:6,
            marginBottom:6,
        },//文字样式
    }
});

演示效果：

      

 

 

3.ReactNavigation之createDrawerNavigator导航器案例练习（!存在bug）

·导入createDrawerNavigator导航器

编写代码

const AppDrawerNavigator=createDrawerNavigator({
    Page4:{
        screen:Page4,
        navigationOptions:{
            drawerLabel:"Page4",
            drawerIcon:({tintColor})=>(
                <MaterialIcons
                    name={'drafts'}
                    size={24}
                    style={tintColor}
                />
            )
        }
    },
    Page5:{
        screen:Page5,
        navigationOptions:{
            drawerLabel:"Page5",
            drawerIcon:({tintColor})=>(
                <MaterialIcons
                    name={'move-to-inbox'}
                    size={24}
                    style={tintColor}
                />
            )
        }
    },
},{
    initialRouteName:'Page4',
    contentOptions:{
        activeTintColor:'#e91e63'
    },
    contentComponent:(props)=>(
        <ScrollView 
            style={{backgroundColor:'#789',flex:1}}
        >
            <SafeAreaView
                forceInset={{top:'always',horizontal:'never'}}  
                
            >
                <DrawerItems {...props}/>
            </SafeAreaView>
        </ScrollView>
    )
});//存在问题，需要后期调整

 

4.ReactNavigation之createSwitchNavigator导航器案例练习

·该导航器主要与登录验证有关，在后面的章节会具体介绍。