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

时间 2019-11-20

标签 react native 实战项目导航栏目 React 繁體版

原文原文链接

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

本篇目录：react

基础导航练习√

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

相关资料：ios

练习连接：http://www.devio.org/2018/12/24/createStackNavigator/react-native

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

1. 初始化react native项目学习

react-native init react_navigation_demo

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

yarn add react-navigation

3. 安装依赖this

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

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

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导航器案例练习

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