react-navigaton3.x之createStackNavigator createBottomTabNavigator导航

0.RN版本信息

Snip20190717_1.png

1.安装插件

 1.1初始化项目
 react-native init XXX --version 0.59.0
7EF9CF6BC2E4CAFE23D8EFD1E78B8077.png
1.2 启动项目
4ACA0D75F278420ABFF98FAB79889413.png
1.3 开启实时刷新服务
0353FE24538C6700764A57DA61AE4AF4.png
1.4 安装react-navigation
yarn add react-navigation
5E8D0D3349FF5C31A5E6DD9518EE1566.png
1.5 安装react-native-gesture-handler
B012019E3810CA1811D1847F065F4783.png
1.6 link
3322D82B806A5DF499FE1E8562A24B88.png

2代码书写-----stackNavigator

2.1 设置Home导航容器为App的根容器
在index中修改App为Home
/**
 * @format
 */
import React from 'react'
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import Home from './navigators/pages/Home'

AppRegistry.registerComponent(appName, () => Home);

2.2配置Home的导航容器
import {
    createStackNavigator,
    createAppContainer
} from 'react-navigation'
import React from 'react'
import {View, Button} from 'react-native'
import first from './first'
import second from './second'

const Home = createStackNavigator({
    first:{
        screen:first,
        navigationOptions:{
            title:`First`,
            headerBackTitle:`返回`
        }

    },
    second:{
        screen:second,
        navigationOptions: {
            title: `Second`
        }
    }
});
export default HomeNav = createAppContainer(Home)

2.3 用于跳转的两个界面
first
import React,{Component} from 'react'
import {View,Text, Button} from 'react-native'
export default class first extends Component{
    render(){
        const {navigation} = this.props;
        return <View>
            <Text>First</Text>
           {/*写法一不传值*/}
            <Button title='跳转二级界面' onPress={()=>{
                navigation.push('second')
//navigation.push('second',{name:'LDDDD'});  传值
        }}></Button>
           {/*写法二传值*/}
            <Button title='跳转二级界面传值'
                    onPress={() => navigation.navigate('second', {name: 'LDD'})}
            >
            </Button>
        </View>
    }
}
*********************************************************
second
import React,{Component} from 'react'
import {View,Text, Button} from 'react-native'
export default class second extends Component{
    render(){
        const {navigation} = this.props;
        return <View>
            <Text>First</Text>
            <Button title='返回一级界面' onPress={()=>{
                navigation.pop();
            }}></Button>
           <Text>{'一级界面传递过来的name的值 = ' + navigation.state.params.name}</Text>
        </View>
    }
}

second 通过setParams 改变当前页面naviagtion中的state.params的值
import React,{Component} from 'react'
import {View,Text, Button} from 'react-native'
export default class second extends Component{
    render(){
        const {navigation} = this.props;
        // console.warn(navigation.state.params);
        const {setParams} = this.props.navigation;
        return <View>
            <Text>First</Text>
            <Button title='返回一级界面' onPress={()=>{
                //navigation.pop();
                navigation.goBack();
            }}>
            </Button>

            {/*使用setParams改变 route params*/}
            <Button
                    onPress={()=>setParams({name:'不能等于LDD了'})}
                    title="setParams to '非LDD'"
            >
            </Button>

            <Text>{'一级界面传递过来的name的值 = ' + navigation.state.params.name}</Text>

        </View>
    }
}

3. demo

4 : createBottomTabNavigator

效果为:


Simulator Screen Shot - iPhone X - 2019-07-19 at 18.01.53.png

相对于 stackNavigator来说需要多导入一个矢量图库

react-native-vector-icons
我安装的版本: "react-native-vector-icons": "^6.6.0",
安装完需要
react-native link

代码实现

import React from 'react'
import {
    createAppContainer,
    createBottomTabNavigator
} from 'react-navigation'
import first from './first'
import second from './second'
import third from './third'
import Ionicons from 'react-native-vector-icons/Ionicons'

const BottomTab = createBottomTabNavigator({
        first: {
            screen: first,
            navigationOptions: {
                tabBarLabel: '首页',
                tabBarIcon: ({tintColor}) => (
                    <Ionicons
                        name={'ios-home'}
                        size={26}
                        style={{color: tintColor}}
                    />
                )
            }
        },
        second: {
            screen: second,
            navigationOptions: {
                tabBarLabel: '发现',
                tabBarIcon: ({tintColor}) => (
                    <Ionicons
                        name={'ios-hourglass'} //creditcard
                        size={26}
                        style={{color: tintColor}}
                    />
                )
            }
        },
        third: {
            screen: third,
            navigationOptions: {
                tabBarLabel: '我的',
                tabBarIcon: ({tintColor}) => (
                    <Ionicons
                        name={'ios-musical-notes'}
                        size={26}
                        style={{color: tintColor}}
                    />
                )
            }
        }
    },
    {
        tabBarOptions: {
            activeTintColor: 'red'
        }
    }
);

export default BottomTabNav = createAppContainer(BottomTab);

5. createSwitchNavigator

最简单的导航 适用于登录之后切换到首页 或者引导页之后切换到登录页 具有不可🙅‍♂️逆性

import {
    createAppContainer,
    createSwitchNavigator,
    createStackNavigator
} from 'react-navigation'
import Home from './switchNavHome'
import Login from './switchNavLogin'
import Page1 from './switchNavPage1'
const AuthoStack = createStackNavigator({
   login:{
       screen:Login,
       navigationOptions:{
           title:'登录'
       }
   }
});
const AppStack = createStackNavigator({
   home:{
       screen:Home,
       navigationOptions:{
           title:'首页'
       }
   } ,
    page1:{
       screen:Page1,
        navigationOptions:{
           title:'二级页面'
        }
    }
});
const switchNav = createSwitchNavigator({
    Autho : AuthoStack,
    App   : AppStack
},{
    initialRouteName:'Autho'
});
export default switchContainer = createAppContainer(switchNav);

5.1 switchNavLogin

import React,{Component} from 'react'
import {View,Text, Button} from 'react-native'
export default class switchNavLogin extends Component{
    render(){
        const {navigation} = this.props;
        return <View>
            <Text>
                switchNavLogin
            </Text>
            <Button
                title='跳转二级界面'
                onPress={()=>{
                   navigation.navigate('App');
                }}
            >
            </Button>
        </View>
    }
}

5.2 switchNavHome

import React,{Component} from 'react'
import {View,Text, Button} from 'react-native'
export default class switchNavHome extends Component{
    render(){
        const {navigation} = this.props;
        return <View>
            <Text>
                switchNavHome
            </Text>
            <Button
                title='跳转二级界面'
                onPress={()=>{
                    navigation.push('page1');
                }}
            >
            </Button>
        </View>
    }
}

5.3 switchNavPage1

import React,{Component} from 'react'
import {View,Text, Button} from 'react-native'
export default class switchNavPage1 extends Component{
    render(){
        return <View>
            <Text>
                switchNavPage1
            </Text>
        </View>
    }
}

6. createDrawerNavigator

抽屉效果

import {
    createAppContainer,
    createDrawerNavigator,
    DrawerItems
} from 'react-navigation'
import page1 from './drawerPage1'
import page2 from './drawerPage2'
import page3 from './drawerPage3'
import Meions from 'react-native-vector-icons/MaterialIcons'
import {ScrollView, SafeAreaView} from 'react-native'
import React from 'react'
const DrawerN = createDrawerNavigator({
    page11: {
        screen: page1,
        navigationOptions: {
            drawerLabel: '侧边栏Item1',
            drawerIcon: ({tintColor}) => {
                return <Meions
                    name="drafts"
                    size={24}
                    style={{backgroundColor: tintColor}}
                >
                </Meions>
            }
        }
    },
    page12: {
        screen: page2,
        navigationOptions: {
            drawerLabel: '侧边栏Item2',
            drawerIcon: ({tintColor}) => {
                return <Meions
                    name="drafts"
                    size={24}
                    style={{backgroundColor: tintColor}}
                >
                </Meions>
            }
        }
    }
}, {
    initialRouteName: 'page11',
    contentOptions: {
        activeTintColor: 'orange'
    },
    contentComponent: (props) => (
        <ScrollView
            style={{backgroundColor: 'green', flex: 1}}
        >
            <SafeAreaView
            >
                <DrawerItems
                    {...props}
                />
            </SafeAreaView>
        </ScrollView>
    )
});

export default DrawerContainer = createAppContainer(DrawerN);

import React, {Component} from 'react'
import {View, Text, StyleSheet, Button} from 'react-native'
export default class drawerPage1 extends Component {
    render() {
        const {navigation} = this.props;
        return <View style={styles.container}>
            <Text>
                DrawerPage1
            </Text>
            <Button
                title='打开侧边栏'
                onPress={() => {
                    navigation.openDrawer();
                }}
            >
            </Button>
            <Button
                title='关闭侧边栏'
                onPress={()=>{
                    navigation.closeDrawer();
                }}
            >
            </Button>
            <Button
                title='切换'
                onPress={()=>{
                    navigation.toggleDrawer();
                }}
            >

            </Button>
        </View>
    }
}
const styles = StyleSheet.create({
    container: {
        marginTop: 50,
        flex: 1
    }
});
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。