一篇边学边总结react-navigation的文章

最新推荐文章于 2024-06-19 15:20:21 发布

default_coder

最新推荐文章于 2024-06-19 15:20:21 发布

阅读量281

点赞数

分类专栏： react-native

本文链接：https://blog.csdn.net/default_coder/article/details/80089323

版权

react-native 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

*该文章用于以后自己查看，所以文章逻辑不是很统一。

StackNavigator的基本流程

注册页面:

这里第一个注册的是顶层组件，会默认一开始显示。

import { StackNavigator } from 'react-navigation';
import Home from './src/container/Home/Home';
import Detail from './src/container/Detail/Detail';
import List from './List';

export default StackNavigator({
    Home: { //key为这个组件的标识
        screen: Home
    },
    Detail: {
        screen: Detail //引入的组件写在这里
    },
    List: {
        screen: List,
        navigationOptions: { //每个页面的一些配置，可以写在这里，也可以写在具体的组件里面
            title: '列表标题' 
        }
    }
});

每个组件的配置写在具体的组件里面：

export default class List extends Component{
    static navigationOptions = {
        title: 'List',
        //header: null  这个参数可以隐藏头部

    };

跳转到某个页面：

render() {
    const { navigate, state } = this.props.navigation;
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                Welcome to React Home!
            </Text>
            <Button
                onPress= {() => {
                    navigate('Detail', {user_name: "YINYI"}) //跳转到Detail组件 并传了一个user_name的参数给Detail组件
                }}
                title="跳转到Detail"
                color= "#f40"
            />
        </View>
    );
}

在Detai也里面使用接收的参数：

render() {
    const {navigator, state,} = this.props.navigation;
    return (
        <View style={styles.container}>
            <Button
                onPress= {() => {
                    navigator('List')
                }}
                title="跳转到List"
                color= "#f40"
            />
            <Text>{state.params.user_name}</Text> //这里使用Home传过来的参数
        </View>
    );
}

TabNavigator 流程

注册Tab各个组件

import { TabNavigator } from 'react-navigation';
import Detail from '../Detail/Detail';
import List from '../../../List';
export default Home = TabNavigator({
    Detail: {
        screen: Detail,
        navigationOptions: {
            title: '详情',
            tabBarLabel: '详情',
            tabBarIcon: () => {
                return(<Image
                    source={
                            require('../../static/minus.png')
                        }
                    style={styles.icon}// {tintColor: tintColor} 选中的图片和文字颜色
                />)
            }
        }
    },
    List: {
        screen: List,
        navigationOptions: {
            title: '我的',
            tabBarLabel: '我的',
            tabBarIcon: ({ tintColor }) => (
                <Image
                    source={
                            require('../../static/add.png')
                        }
                    style={styles.icon}// {tintColor: tintColor} 选中的图片和文字颜色
                />
            )
        }
    },
}, {
    tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
    swipeEnabled: true, // 是否左右滑动,如果有DrawerNavigator,最好设置为false避免手势冲突
    tabBarOptions: { //这里设置一些tabBar的属性
        activeTintColor: '#f40', // 文字和图片选中颜色
        inactiveTintColor: '#999', // 文字和图片默认颜色
        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
        indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？
        style: {
            backgroundColor: '#fff', // TabBar 背景色
            height:50
        },
        labelStyle: {
            fontSize: 12, // 文字大小,
            marginTop: 0,
        },
    },
});

将这个容器添加到router

import { StackNavigator } from 'react-navigation';
import Home from './src/container/Home/Home';
import Content from './src/container/Content/Content';

export default StackNavigator({
    Home: {
        screen: Home,
        navigationOptions: {
            title: "HomePage"
        }
    },
    Content: {
        screen: Content,
        navigationOptions: {
            headerTitle: 'ContentPage'
        }
    }
});

TabNavigator里面的每个组件可以跳转StackNavigator里的页面，这样可以嵌套很多可能，但是要跳转的页面必须在StackNavigator里面注册，比如这里在Detail里面跳转到Content:

export default class Detail extends Component{
    render() {
        return (
            <View style={styles.container}>
                <Text>Detail Page</Text>
                <Button
                    title= "跳转到Content"
                    color= "#f40"
                    onPress= {() => {
                        this.props.navigation.navigate('Content', {content: 'Content的详细内容...'})
                    }}
                />
            </View>
        );
    }
}

DrawerNavigator流程：

注册一个DrawerNavigator,里面包含了两个界面:

const CustomDrawerContentComponent = (props) => (
    <ScrollView>
        {/*<DrawerItems {...props} />*/}
        <View>
            <Text>46645646546</Text>
        </View>
    </ScrollView>
);
const MyDraw = DrawerNavigator({
        Home: {
            screen: MyHomeScreen,
        },
        Notifications: {
            screen: Order,
        },
    },
    {
        //drawerWidth: 200, // 抽屉宽
        drawerPosition: 'left', // 抽屉在左边还是右边
        contentComponent: CustomDrawerContentComponent,  // 自定义抽屉组件
        // contentOptions: {
        //     initialRouteName: MyHomeScreen, // 默认页面组件
        //     activeTintColor: 'white',  // 选中文字颜色
        //     activeBackgroundColor: '#ff8500', // 选中背景颜色
        //     inactiveTintColor: '#666',  // 未选中文字颜色
        //     inactiveBackgroundColor: '#fff', // 未选中背景颜色
        //     style: {  // 样式
        //
        //     }
        // }
    });

module.exports = MyDraw;

*在Drawer里注册的页面只能跳转到Drawer里面注册的其他页面。

在另一个页面里展现DrawerNavigator:

export default class Content extends Component{

    render() {
        return (
            <Drawer />
        );
    }
}

将这个页面放在之前的StackNavigator里就可以通过访问这个页面（这里的content）去访问Drawer里包含的页面了：

export default StackNavigator({
    Home: {
        screen: Home,
        navigationOptions: {
            title: "HomePage"
        }
    },
    Content: {
        screen: Content,
        navigationOptions: {
            header: null
        }
    },
    Detail: {
        screen: Detail
    }
});

路由跳转并清空路由记录：

import { NavigationActions } from 'react-navigation'
 resetAction = NavigationActions.reset({
                index: 0,
                actions: [
                    NavigationActions.navigate({routeName:'xxx'})//要跳转到的页面名字
                ]
            });
this.props.navigation.dispatch(resetAction);

最后附上一些参数说明（这一部分属于转载内容）：

1、StackNavigator属性介绍

[html]view plaincopy
navigationOptions：配置StackNavigator的一些属性。  
  
    title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用  
    header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null  
    headerTitle：设置导航栏标题，推荐  
    headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null  
    headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"  
    headerRight：设置导航条右侧。可以是按钮或者其他视图控件  
    headerLeft：设置导航条左侧。可以是按钮或者其他视图控件  
    headerStyle：设置导航条的样式。背景色，宽高等  
    headerTitleStyle：设置导航栏文字样式  
    headerBackTitleStyle：设置导航栏‘返回’文字样式  
    headerTintColor：设置导航栏颜色  
    headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0  
    gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭  
   
  
screen：对应界面名称，需要填入import之后的页面  
  
mode：定义跳转风格  
  
   card：使用iOS和安卓默认的风格  
  
   modal：iOS独有的使屏幕从底部画出。类似iOS的present效果  
  
headerMode：返回上级页面时动画效果  
  
   float：iOS默认的效果  
  
   screen：滑动过程中，整个页面都会返回  
  
   none：无动画  
  
cardStyle：自定义设置跳转效果  
  
   transitionConfig： 自定义设置滑动返回的配置  
  
   onTransitionStart：当转换动画即将开始时被调用的功能  
  
   onTransitionEnd：当转换动画完成，将被调用的功能  
  
path：路由中设置的路径的覆盖映射配置  
  
initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件  
  
initialRouteParams：初始路由参数  

注：大家可能对于path不太理解。path属性适用于其他app或浏览器使用url打开本app并进入指定页面。path属性用于声明一个界面路径，例如：【/pages/Home】。此时我们可以在手机浏览器中输入：app名称://pages/Home来启动该App，并进入Home界面。

2、TabNavigator属性介绍

[html]view plaincopy
screen：和导航的功能是一样的，对应界面名称，可以在其他页面通过这个screen传值和跳转。  
  
navigationOptions：配置TabNavigator的一些属性  
  
title：标题，会同时设置导航条和标签栏的title  
  
tabBarVisible：是否隐藏标签栏。默认不隐藏(true)  
  
tabBarIcon：设置标签栏的图标。需要给每个都设置  
  
tabBarLabel：设置标签栏的title。推荐  
  
导航栏配置  
  
tabBarPosition：设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'）  
  
swipeEnabled：是否允许在标签之间进行滑动  
  
animationEnabled：是否在更改标签时显示动画  
  
lazy：是否根据需要懒惰呈现标签，而不是提前，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐为true  
  
trueinitialRouteName： 设置默认的页面组件  
  
backBehavior：按 back 键是否跳转到第一个Tab(首页)， none 为不跳转  
  
tabBarOptions：配置标签栏的一些属性iOS属性  
  
activeTintColor：label和icon的前景色 活跃状态下  
  
activeBackgroundColor：label和icon的背景色 活跃状态下  
  
inactiveTintColor：label和icon的前景色 不活跃状态下  
  
inactiveBackgroundColor：label和icon的背景色 不活跃状态下  
  
showLabel：是否显示label，默认开启 style：tabbar的样式  
  
labelStyle：label的样式安卓属性  
  
activeTintColor：label和icon的前景色 活跃状态下  
  
inactiveTintColor：label和icon的前景色 不活跃状态下  
  
showIcon：是否显示图标，默认关闭  
  
showLabel：是否显示label，默认开启 style：tabbar的样式  
  
labelStyle：label的样式 upperCaseLabel：是否使标签大写，默认为true  
  
pressColor：material涟漪效果的颜色（安卓版本需要大于5.0）  
  
pressOpacity：按压标签的透明度变化（安卓版本需要小于5.0）  
  
scrollEnabled：是否启用可滚动选项卡 tabStyle：tab的样式  
  
indicatorStyle：标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题  
  
labelStyle：label的样式  
  
iconStyle：图标样式

3、DrawerNavigator属性介绍

[html]view plaincopy
DrawerNavigatorConfig  
  
    drawerWidth - 抽屉的宽度  
    drawerPosition - 选项是左或右。 默认为左侧位置  
    contentComponent - 用于呈现抽屉内容的组件，例如导航项。 接收抽屉的导航。 默认为DrawerItems  
    contentOptions - 配置抽屉内容  
  
    initialRouteName - 初始路由的routeName  
    order - 定义抽屉项目顺序的routeNames数组。  
    路径 - 提供routeName到路径配置的映射，它覆盖routeConfigs中设置的路径。  
    backBehavior - 后退按钮是否会切换到初始路由？ 如果是，设置为initialRoute，否则为none。 默认为initialRoute行为  
  
   DrawerItems的contentOptions属性  
  
    activeTintColor - 活动标签的标签和图标颜色  
    activeBackgroundColor - 活动标签的背景颜色  
    inactiveTintColor - 非活动标签的标签和图标颜色  
    inactiveBackgroundColor - 非活动标签的背景颜色  
    内容部分的样式样式对象  
    labelStyle - 当您的标签是字符串时，要覆盖内容部分中的文本样式的样式对象  