react-navigation，刷新你的导航一、属性介绍二、案例

2018-05-02 10:49:21 浏览数 (1)

在2017年1月，新开源的react-navigation库备受瞩目。它有类似于原生版性能的体验效果，可能会成为未来RN导航组件中的主力军。该库包含三类组件： （1）StackNavigator：用来跳转页面和传递参数。stack就是数据结构的堆栈技术，遵循后进先出的原理。 （2）TabNavigator：类似底部导航栏，用来在同一屏幕下切换不同界面 （3）DrawerNavigator：侧滑菜单导航栏，用于轻松设置带抽屉导航的屏幕

来朵花花来朵花花

一、属性介绍

1.1StackNavigator属性

  • 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独有的使屏幕从底部拖出
  • headerMode:返回上级页面时的动画效果
    • float:iOS的默认效果
    • screen:滑动过程中，整个页面都会返回
    • none:无动画
  • cardStyle:自定义设置跳转效果
    • transitionConfig:自定义设置滑动返回的配置
    • onTransitionStart:当转换动画即将被调用的功能
    • onTransitionEnd:当转换动画完成时被调用的功能
  • path:路由中设置的路径的覆盖映射配置。path用于声明一个界面路径
  • initialRouteName:设置默认的页面组件，必须是已经注册的页面组件
  • initailRouteParams:设置路由参数

1.2TabNavigator属性

  • screen:和导航的功能一样，对应界面名称，可以在气头页面通过这个screen传值和跳转
  • navigationOptions:配置TabNavigator的一些属性
  • title:标题，会同时设置导航条和标签栏的title
  • tabBarVisible:是否显示标签栏。默认是true不隐藏
  • tabBarIcon:设置标签栏的图标。需要给每一项都设置
  • tabBarLabel:设置标签栏的title

以下属性配合导航使用

  • tabBarPosition:设置tabBar的位置，属性值为top和bottom。iOS默认在底部，安卓默认在顶部
  • swipeEnabled:是否允许在标签之间进行滑动
  • animationEnabled:是否在更改标签时显示动画
  • lazy:是否在app打开的时候将底部的标签栏全部加载，默认为flase。推荐打开
  • trueInitialRouteName:设置默认的页面组件
  • backBehavior:按back键是否跳转到第一个tab，none为不跳转
  • tabBarOptions:设置标签栏
  • 专属iOS属性
    • activeTintColor:设置在活跃状态下，label和icon的前景色
    • activeBackgroundColor:label和icon的背景色
    • inactiveTintColor:设置在不活跃状态下，label和icon的前景色
    • inactiveTintColor:设置在不活跃状态下，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：图标样式

1.3DrawerNavigator属性介绍

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

二、案例

2.1StackNavigation案例

  • 集成第三方库 使用npm安装react-navigation库，--save表示将该组件写入到package.json文件中。
代码语言：javascript复制
npm install react-navigation --save

当然，也可以采用yarn工具将该库添加到项目中

代码语言：javascript复制
 yarn add react-navigation
  • 导入组件到项目中 本项目创建于0.49.2的环境中，这次RN对该版本做了重大改进。安卓端和iOS的文件混合成为index.js文件。而文件App.js注册到了又注册到了index.js文件。故我们将需要用到的代码编写在App.js文件中。
代码语言：javascript复制
import {StackNavigator} from 'react-navigation';
  • 创建导航，并且添加路由
代码语言：javascript复制
import HomeScreen from './HomeScreen'; //导入需要展示的页面
代码语言：javascript复制
const  Navigator = StackNavigator(
//设置导航要展示的页面
    {
       HomeScreen:{screen:HomeScreen}   
    },
    //设置navigationOptions属性对象
    {
      navigationOptions: {
        title: '标题', //在导航中显示的标题内容
        headerBackTitle:null,
        headerTintColor:'#333333',
        showIcon:true,
        swipeEnabled:false,
        animationEnabled:false,
      },
      mode:'card',  //设置mode属性
    }
);
  • 在render函数中返回导航
代码语言：javascript复制
export default class App extends Component<{}> {
  render() {
    return (
       <Navigator/>
    );
  }
}
  • HomeScreen.js代码实现
代码语言：javascript复制
import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    AppRegistry,
    Text,
    View
} from 'react-native';

export default class HomeScreen extends Component {
    render(){
        return(
            <View style={{flex:1,backgroundColor:'pink'}}>
                <Text>你好啊 在干嘛呢</Text>
            </View>
        );
    }
}
效果图效果图

下面可以来做导航的跳转操作 为了实现跳转操作的功能，需要先新建一个页面，并且将这个页面添加到导航中去。

  • 导入页面到App.js文件
代码语言：javascript复制
import ChatScreen from './ChatScreen'  //新建的文件
代码语言：javascript复制
const  Navigator = StackNavigator(
    {
       HomeScreen:{screen:HomeScreen},
       ChatScreen:{screen:ChatScreen}  //这是新添加的导航界面
  • 跳转操作

只要界面加入到了导航当中，组件中就会自动添加navigation的navigate属性。使用该属性可以跳转到下一个界面。下面是HomeScreen中的代码。ChatScreen是第二个导航界面。在HomeScreen中添加一个button组件,使用routeName路由名称ChatScreen关联到组件ChatScreen.

代码语言：javascript复制
export default class HomeScreen extends Component {

    render(){
        return(
            <View style={{flex:1,backgroundColor:'pink'}}>
                <Text>你好啊 在干嘛呢</Text>
                <Button
                  onPress={()=>this.props.navigation.navigate('ChatScreen')}
                  title={"chat with lucy"}
                />
            </View>
        );
    }
}
  • 返回操作

当第二个界面想要回归到上一个界面时，也要用到navigation的goBack属性。当然导航有自身的返回按钮。以下代码是ChatScreen组件的代码，当用户组件Text也会返回到上一个界面。

代码语言：javascript复制
export default class ChatScreen extends Component {
    static navigationOptions = {
        title: 'Chat with Lucy',
    };
    render() {
        return (
            <View>
                <Text onPress={()=>this.props.navigation.goBack()}>Chat with Lucy</Text>
            </View>
        );
    }
}
效果图效果图
  • 传递参数 在ChatScreen页面中，如果直接写死标题则不利于代码的可维护性。所以我们可以在导航的时候传递参数。首先编辑一下HomeScreen组件，传递自定义的属性user参数到路由中去。
代码语言：javascript复制
export default class HomeScreen extends Component {
    render(){
        const { navigate } = this.props.navigation;
        return(
            <View style={{flex:1,backgroundColor:'pink'}}>
                <Text>你好啊 在干嘛呢</Text>
                <Button
                  onPress={()=>navigate('ChatScreen',{user:'dudu'})}
                  title={"chat with lucy"}
                />
            </View>
        );
    }
}

之后可以编辑ChatScreen组件显示的user参数，这个参数通过route来传递。为了代码的健壮性，如果外界的user属性有值，就将user赋值给title。如果没有则让title为空。 设置导航右边的菜单，设置一个“返回”的文字

代码语言：javascript复制
static navigationOptions =({ navigation, screenProps }) => ({
    title: navigation.state.params?navigation.state.params.user:null,
    headerRight:(
        <Text onPress={navigation.state.params?navigation.state.params.navigatePress:null}>
            返回
        </Text>
    )
});
  • 外界传值

我们也可以将外界的参数传递给函数内部。下面的代码采用结构赋值的方法，取出导航中状态机的参数params，取出参数中的user，一样可以拿到外界参数。

代码语言：javascript复制
 render() {
        const {params} = this.props.navigation.state;
        return (
            <View>
                <Text onPress={()=>this.props.navigation.goBack()}>Chat with {params.user}</Text>
            </View>
        );
    }
效果图效果图

2.2 TabNavigator案例

react-navigation组件除了可以用做页面间的跳转，当然也可以用做tab界面之间的切换。

  • 导入react-navigation的子组件。这些组件分别是用于界面切换、跳转、和标签栏外置的摆放。
代码语言：javascript复制
import {StackNavigator,TabNavigator,TabBarBottom} from 'react-navigation';
  • 封装一个TabBarItem，用于设置每个tab的图片
代码语言：javascript复制
import React,{Component} from 'react';
import {Image} from 'react-native';

export default class TabBarItem extends Component {

    render() {
        return(
            <Image source={ this.props.focused ? this.props.selectedImage : this.props.normalImage }
                   style={ { tintColor:this.props.tintColor,width:25,height:25 } }
            />
        )
    }

}
  • 导入封装的TabBarItem组件 表示TabBar的每一项
代码语言：javascript复制
import TabBarItem from './TabBarItem';
  • 定义TabNavigator。定义几个要切换的tab，每个tab设置好对应要显示的屏幕。当然，从之前介绍的属性可知，TabNavigator也拥有navigationOptions属性，它由系统传入navigation参数，之后来设置其他的子属性。比如说tabBarLabel设置每个tab的标题，tabBarIcon设置选中和非选中的图片。 之后再设置其它每个tab共同的属性，用一个对象表示。
代码语言：javascript复制
const Tab = TabNavigator({
  Home:{
    screen:HomeScreen,
    navigationOptions:({navigation}) => ({
      tabBarLabel:'首页',
      tabBarIcon:({focused,tintColor}) => (
          <TabBarItem
              tintColor={tintColor}
              focused={focused}
              normalImage={require('./imgs/ic_like_sel.png') }
              selectedImage={require('./imgs/ic_mine_sel.png')}
          />
      )
    }),
  },

  Mine:{
    screen:MineScreen,
    navigationOptions:({navigation}) => ({
      tabBarLabel:'我',
      tabBarIcon:({focused,tintColor}) => (
          <TabBarItem
              tintColor={tintColor}
              focused={focused}
              normalImage={require('./imgs/ic_like_sel.png')}
              selectedImage={require('./imgs/ic_like_sel.png')}
          />
      )
    }),
  },
},

    {
      tabBarComponent:TabBarBottom,
      tabBarPosition:'bottom',
      swipeEnabled:false,
      animationEnabled:false,
      lazy:true,
      tabBarOptions:{
        activeTintColor:'#06c1ae',
        inactiveTintColor:'#979797',
        style:{backgroundColor:'#ffffff',},
        labelStyle: {
          fontSize: 20, // 文字大小
        },
      }
});
  • 将tab放入到Navigator中
代码语言：javascript复制
const Navigator = StackNavigator(
    {
        Tab:{screen:Tab},

    },

    {
        navigationOptions:{
            // title:'首页',
            headerBackTitle:null,
            headerTintColor:'#333333',
            showIcon:true,
            swipeEnabled:false,
            animationEnabled:false,
        },

        mode:'card',
    });
  • 在render方法中返回导航组件
代码语言：javascript复制
export default class App extends Component<{}> {
  render() {
    return (
     <Navigator/>
    );
  }
}
  • HomePage和MinePage的代码

StackNavigator还提供了onNavigationStateChange回调方法，用来监听导航状态的改变

代码语言：javascript复制
import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';
export default class HomePage extends Component {

    static navigationOptions = {
        title:'首页',
    };

    render() {
        return(
            <View style={{flex:1,backgroundColor:'yellow'}}>
                <Text onPress={this._skip.bind(this)}>点击跳转</Text>
            </View>
        );
    }

    _skip() {
        this.props.navigation.navigate("Mine");
    }
}
代码语言：javascript复制
import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';
export default class MinePage extends Component {

    static navigationOptions = {
        title:'我',
    };

    render() {
        return(
            <View style={{flex:1,backgroundColor:'pink'}}>
                <Text onPress={this._skip.bind(this)}>MinePage</Text>
            </View>
        );
    }

    /**
     * 跳转
     */
    _skip() {
        this.props.navigation.goBack();
    }
}
效果图效果图

2.3DreawerNavigator抽屉导航

DrawerNavigator是一个抽屉导航。设置方式其实跟设置Tab差不多。只是需要设定某些特殊的属性。比如说drawerLabel、drawerIcon、drawerWidth、drawerPosition等等。

  • 定义抽屉导航 HomeScreen与MineScree是导入外界的两个界面，将它们定义到DrawerNavigator中。在抽屉导航中，将组件的属性也一起设置好。
代码语言：javascript复制
import {DrawerNavigator} from 'react-navigation';
import HomeScreen from './Pages/HomePage';
import MineScreen from './Pages/MinePage';

const MyApp = DrawerNavigator({
    Home: {
        screen: HomeScreen,
    },
    Mine: {
        screen:MineScreen,
    },
},
    {
        drawerWidth: 200, // 抽屉宽
        drawerPosition: 'left', // 抽屉在左边还是右边
        contentOptions: {
            initialRouteName: 'Home', // 默认页面组件
            activeTintColor: 'white',  // 选中文字颜色
            activeBackgroundColor: '#ff8500', // 选中背景颜色
            inactiveTintColor: '#666',  // 未选中文字颜色
            inactiveBackgroundColor: '#fff', // 未选中背景颜色
            style: {  // 样式

            }
        }
    }
);
  • 在render方法中返回抽屉组件
代码语言：javascript复制
export default class App extends Component<{}> {
    // static navigationOptions={
    //     title:'app',
    //     gesturesEnabled:false,
    //     header:null,
    // }

    render() {
        return (
            <View style = {{flex:1,marginTop:20,}}>

                <MyApp />
            </View>
        );
    }
}
  • 设置HomePage子页面的属性 一旦加入了导航组件react-navigation,那么其页面就会有navigationOptions属性。我们可以在这个属性里面设置抽屉导航的样式。
代码语言：javascript复制
export default class HomePage extends Component<{}> {
    static navigationOptions = {
        drawerLabel: 'Home',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('.././imgs/ic_like_sel.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };
}
  • 返回HomePage页面要展示的组件 用navigation的navigate属性可以跳转到指定的页面。如果指定的是DrawerOpen，意思就是打开抽屉。
代码语言：javascript复制
render() {
        return (
            <View>
                <Button
                    onPress={() => this.props.navigation.navigate('Mine')}
                    title="Go to Mine"
                />
                <Button
                    onPress={()=>this.props.navigation.navigate('DrawerOpen')}
                    title="open the draw"
                />
            </View>
        );
    }
  • 设置样式
代码语言：javascript复制
const styles = StyleSheet.create({
    icon: {
        width: 24,
        height: 24,
    },
});
  • 设置MinePage页面 MinePage页面和HomePage页面相差不大。只是做代码演示而已，这里不再阐述
代码语言：javascript复制
import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    Button
} from 'react-native';
export default class MineScreen extends Component<{}> {
    static navigationOptions = {
        drawerLabel: 'Mine',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('.././imgs/ic_mine_sel.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };

    render() {
        return (
            <View>
                <Button
                    onPress={() => this.props.navigation.goBack()}
                    title="Go back home"
                />

                <Button
                    onPress={()=>this.props.navigation.navigate('DrawerOpen')}
                    title="open the draw"
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    icon: {
        width: 24,
        height: 24,
    },
});

效果图如下:

效果图效果图

非宁静无以致远，非淡泊无以明志。在学习的道路上，多少会遇到泥泞挫折。我可以放慢脚步，但绝能不回头，我的梦想，在路上。

reactnative

0 人点赞