React-Native react-navigation 的使用

记得之前使用react-native的时候导航栏使用的是navigation ，iOS 下使用navigationIOS . 现在又要重新接触React-Native ,自然要了解下有哪些变化。

下面就来看看 react-navigation 的使用

该类库包含三类组件

(1). StackNavigator ：用来跳转页面和传递参数
(2).TabNavigator : 类似底部导航栏，用来在同一屏幕下切换不同界面
(3).DrawerNavigator : 侧滑菜单导航栏，用于轻松设置带抽屉导航的屏幕

一、react-navigation 使用

具体内容大致分为：

(1) react-navigation 库属性介绍
(2) StackNavigator、 TabNavigator 实现界面简的跳转、Tab切换
(3) StackNavigator 界面简跳转、传值、取值
(4)DrawerNavigator 实现抽屉导航菜单
(5)DrawerNavigator 扩展功能
(6)自定义react-navigation
1. StackNavigator 属性介绍
  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属性介绍
screen：和导航的功能是一样的，对应界面名称，可以在其他页面通过这个screen传值和跳转。  
  
  
navigationOptions：配置TabNavigator的一些属性  
  
title：标题，会同时设置导航条和标签栏的title  
  
tabBarVisible：是否隐藏标签栏。默认不隐藏(true)  
  
tabBarIcon：设置标签栏的图标。需要给每个都设置  
  
tabBarLabel：设置标签栏的title。推荐  
  
导航栏配置  
 
tabBarComponent: 使用的标签栏（iOS 默认 TabBarBottom ，android 默认TabBarTop） 
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属性介绍
DrawerNavigatorConfig  
  
    drawerWidth - 抽屉的宽度  
    drawerPosition - 选项是左或右。 默认为左侧位置  
    contentComponent - 用于呈现抽屉内容的组件，例如导航项。 接收抽屉的导航。 默认为DrawerItems  
    contentOptions - 配置抽屉内容  
  
    initialRouteName - 初始路由的routeName  
    order - 定义抽屉项目顺序的routeNames数组。  
    路径 - 提供routeName到路径配置的映射，它覆盖routeConfigs中设置的路径。  
    backBehavior - 后退按钮是否会切换到初始路由？ 如果是，设置为initialRoute，否则为none。 默认为initialRoute行为  
  
   DrawerItems的contentOptions属性  
  
    activeTintColor - 活动标签的标签和图标颜色  
    activeBackgroundColor - 活动标签的背景颜色  
    inactiveTintColor - 非活动标签的标签和图标颜色  
    inactiveBackgroundColor - 非活动标签的背景颜色  
    内容部分的样式样式对象  
    labelStyle - 当您的标签是字符串时，要覆盖内容部分中的文本样式的样式对象
3.使用StackNavigator + TabNavigator 实现Tab界面切换、界面间导航

API 定义： StackNavigation(RouteConfig,StackNavigatorConfig)、 TabNavigation(RouteConfigs、TabNavigatorConfig)

(1)集成react-navigation : 在终端执行[npm i react-navigation --save]
(2) Router.js 界面中导入必要的组件,以及相关的写法

import React,{Component} from 'react';
import {
    StackNavigator,
} from 'react-navigation';

import { Home } from './Home/home';
import { App } from './App';
import Test  from './Test';
import { MainTab } from './MainTab';


// 初始化StackNavigator
export const  Routers = StackNavigator({
    // 将TabNavigator包裹在StackNavigator里面可以保证跳转页面的时候隐藏tabbar
    App:{
        screen:App,
    },
    MainTab:{
        screen:MainTab,
    },
    Home:{
      screen:Home,
    },
    Test:{
        screen:Test,
    }
},{

});

(3)定义Tab

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

import { Home } from './Home/home';
import TestTow  from './Text2';
import TabBarItem from './TabBarItem'

import {StackNavigator, TabNavigator,TabBarBottom} from 'react-navigation';

export const MainTab = TabNavigator(
    {
        Home:{
            screen:Home,
            navigationOptions:({navigation}) => ({
            tabBarLabel:'首页',
            labelStyle:{
                fontSize:10,
                color:'red'
            },
            activeTintColor:'red',
            activeBackgroundColor:'yellow',
            tabBarIcon:({focused,tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./images/login_password.png')}
                    selectedImage={require('./images/login_user.png')}
                />
          )
      }),
    },

    TestTow:{
        screen:TestTow,
            navigationOptions:({navigation}) => ({
            tabBarLabel:'我',
            tabBarIcon:({focused,tintColor}) => (
                  <TabBarItem
                  tintColor={tintColor}
                  focused={focused}
                  normalImage={require('./images/login_password.png')}
                  selectedImage={require('./images/login_user.png')}
              />
              )
            }),
          },
    },

    {
        tabBarComponent:TabBarBottom,
            tabBarPosition:'bottom',
        swipeEnabled:false, //不允许滑动切换Tab
        animationEnabled:false,
        lazy:true,//允许懒加载
        tabBarOptions:{
          activeTintColor:'#06c1ae',
              inactiveTintColor:'#979797',
              style:{backgroundColor:'#ffffff',

            },
        labelStyle: {
            fontSize: 20, // 文字大小
        },
    }
  }
);

(4)下面来看看TabBarItem 的封装

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 } }  
            />  
        )  
    }  
      
}

(5)最后在入口文件中index.js

import { AppRegistry } from 'react-native';
import React, {Component} from 'react';
import {Provider} from 'react-redux';
import {StackNavigator} from 'react-navigation';
import { Routers } from './Router';
import store from './Stores/store';



export default class Demo extends Component {

    render() {
        return (
            <Provider store={store}>
                <Routers screenProps={{themeColor:'rgb(45,158,163)',tinkColor:'white'}}/>
            </Provider>
        );
    }
}

AppRegistry.registerComponent('YDOA', () => Demo);

StackNavigator还提供了onNavigationStateChange回调方法，用来监听导航状态的改变。具体不再赘述。实现了界面跳转和切换，那么就该来增加下界面之间的感情了，来看看如何实现界面之间的传值和取值。

四、界面之间的跳转和传值

在界面组件注入到StackNavigator中时，界面组件就被赋予了navigation属性，即在界面组件中可以通过【this.props.navigation】获取并进行一些操作。
navigation属性中提供了很多的函数简化界面间操作，简单列举几点：

(1)通过navigate函数实现界面之间跳转：

this.props.navigation.navigate('Home');

参数为我们在StackNavigator注册界面组件时的名称。同样也可以从当前页面返回到上一页：

this.props.navigation.goBack();

(2)、跳转时传值

this.props.navigation.navigate('Home',{info:'传过去的值'});

第一个参数同样为要跳转的界面组件名称，第二个参数为要传递的参数，info可以理解为key，后面即传递的参数。

(3)获取值：

{this.props.navigation.state.params.info}

通过state.params来获取传来的参数

但是我们会发现iOS 上和Android 上效果不一样。那我们就要进行简单的适配了

image.png

Android 上默认标题是靠左的，那么怎样让它居中呢

在navigationOptions 中添加
 headerTitleStyle:{
                    alignSelf:'center',
                    },
 headerRight:<View></View>,
image.png

五、DrawerNavigator 实现抽屉效果

1、导航实现
API 定义： DrawerNavigator (RouteConfigs, DrawerNavigatorConfig)
(1) 界面中定义DrawerNavigator

import {StackNavigator,TabNavigator,DrawerNavigator} from 'react-navigation';  
import HomeScreen from './pages/HomePage';  
import MineScreen from './pages/MinePage';  
  
export default class Demo extends Component {  
  
  render() {  
        return (  
          <Navigator />  
        );  
  }  
}  
  
const Navigator = DrawerNavigator({  
  
    Home:{screen:HomeScreen},  
    Mine:{screen:MineScreen},  
});  
  
const styles = StyleSheet.create({  
  
    container: {  
        flex: 1,  
    },  
});  
  
AppRegistry.registerComponent('Demo', () => Demo);

定义方式和StackNavigator基本类似

(2)HomeScreen界面和MineScreen界面：

export default class HomePage extends Component {  
  
    static navigationOptions = {  
        drawerLabel: '首页',  
        drawerIcon:({tintColor}) => (  
            <Image  
                source={require('./../imgs/ic_happy.png')}  
                style={[styles.icon, {tintColor: tintColor}]}/>  
        ),  
    };  
  
    render() {  
        return(  
            <View style={{flex:1}}>  
                <Text onPress={this._skip.bind(this)}>点击跳转</Text>  
            </View>  
        );  
    }  
  
    _skip() {  
        this.props.navigation.navigate("Mine");  
    }  
}  
  
  
export default class MinePage extends Component {  
  
    static navigationOptions = {  
        drawerLabel:'我',  
         drawerIcon: ({ tintColor }) => (  
            <Image  
                source={require('./../imgs/ic_h.png')}  
                style={[styles.icon, {tintColor: tintColor}]}  
            />  
        ),  
    };  
  
    render() {  
        return(  
            <View style={{flex:1}}>  
                <Text onPress={this._skip.bind(this)}>返回上一界面</Text>  
            </View>  
        );  
    }  
  
    /**  
     * 跳转  
     */  
    _skip() {  
        this.props.navigation.goBack();  
    }  
}

代码很简单，实现了界面之间的跳转。

2、扩展功能
（1）默认DrawerView不可滚动。要实现可滚动视图，必须使用contentComponent自定义容器，如下所示：

{  
  drawerWidth：200，  
  抽屉位置："对"
  contentComponent：props => <ScrollView> <DrawerItems {... props} /> </ ScrollView>  
}

（2）可以覆盖导航使用的默认组件，使用DrawerItems自定义导航组件：

import {DrawerItems} from 'react-navigation';  
  
const CustomDrawerContentComponent = (props) => (  
  <View style = {style.container}>  
    <DrawerItems {... props} />  
  </View>    
);

（3）嵌套抽屉导航
如果您嵌套DrawerNavigation，抽屉将显示在父导航下方。

六、自定义react-navigation

（1）适配顶部导航栏标题：
测试中发现，在iphone上标题栏的标题为居中状态，而在Android上则是居左对齐。所以需要我们修改源码，进行适配。
【node_modules -- react-navigation -- src -- views -- Header.js】的326行代码处，修改为如下：

title: {  
   bottom: 0,  
   left: TITLE_OFFSET,  
   right: TITLE_OFFSET,  
   top: 0,  
   position: 'absolute',  
   alignItems: 'center',  
 }

上面方法通过修改源码的方式其实略有弊端，毕竟扩展性不好。还有另外一种方式就是，在navigationOptions中设置headerTitleStyle的alignSelf为 ' center '即可解决。

（2）去除返回键文字显示：
【node_modules -- react-navigation -- src -- views -- HeaderBackButton.js】的91行代码处，修改为如下即可。

{Platform.OS === 'ios' &&  
     title &&  
     <Text  
       onLayout={this._onTextLayout}  
       style={[styles.title, { color: tintColor }]}  
       numberOfLines={1}  
     >  
       {backButtonTitle}  
     </Text>}

将上述代码删除即可。
（3）动态设置头部按钮事件：
当我们在头部设置左右按钮时，肯定避免不了要设置按钮的单击事件，但是此时会有一个问题，navigationOptions是被修饰为static类型的，所以我们在按钮的onPress的方法中不能直接通过this来调用Component中的方法。如何解决呢？在官方文档中，作者给出利用设置params的思想来动态设置头部标题。那么我们可以利用这种方式，将单击回调函数以参数的方式传递到params，然后在navigationOption中利用navigation来取出设置到onPress即可：


componentDidMount () {  
    /**  
     * 将单击回调函数作为参数传递  
     */  
    this.props.navigation.setParams({  
            switch: () => this.switchView()  
    });  
}  

switchView() {  
    alert('切换')  
}

static navigationOptions = ({navigation,screenProps}) => ({  
    headerTitle: '企业服务',  
    headerTitleStyle: CommonStyles.headerTitleStyle,  
    headerRight: (  
        <NavigatorItem icon={ Images.ic_navigator } onPress={ ()=> navigation.state.params.switch() }/>  
    ),  
    headerStyle: CommonStyles.headerStyle  
});

（4）结合BackHandler处理返回和点击返回键两次退出App效果
点击返回键两次退出App效果的需求屡见不鲜。相信很多人在react-navigation下实现该功能都遇到了很多问题，例如，其他界面不能返回。也就是手机本身返回事件在react-navigation之前拦截了。如何结合react-natigation实现呢？和大家分享两种实现方式：
1、在注册StackNavigator的界面中，注册BackHandler：

componentWillMount(){  
    BackHandler.addEventListener('hardwareBackPress', this._onBackAndroid );  
}  
  
  
componentUnWillMount(){  
    BackHandler.addEventListener('hardwareBackPress', this._onBackAndroid);  
}  
  
_onBackAndroid=()=>{  
    let now = new Date().getTime();  
    if(now - lastBackPressed < 2500) {  
        return false;  
    }  
    lastBackPressed = now;  
    ToastAndroid.show('再点击一次退出应用',ToastAndroid.SHORT);  
    return true;  
}

2、监听react-navigation的Router

/** 
 * 处理安卓返回键 
 */  
const defaultStateAction = AppNavigator.router.getStateForAction;  
AppNavigator.router.getStateForAction = (action,state) => {  
    if(state && action.type === NavigationActions.BACK && state.routes.length === 1) {  
        if (lastBackPressed + 2000 < Date.now()) {  
            ToastAndroid.show(Constant.hint_exit,ToastAndroid.SHORT);  
            lastBackPressed = Date.now();  
            const routes = [...state.routes];  
            return {  
                ...state,  
                ...state.routes,  
                index: routes.length - 1,  
            };  
        }  
    }  
    return defaultStateAction(action,state);  
};

（5）实现Android中界面跳转左右切换动画
react-navigation在Android中默认的界面切换动画是上下。如何实现左右切换呢？很简单的配置即可：

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

然后在StackNavigator的配置下添加如下代码：

transitionConfig:()=>({  
    screenInterpolator: CardStackStyleInterpolator.forHorizontal,  
})

（6）解决快速点击多次跳转
当我们快速点击跳转时，会开启多个重复的界面，如何解决呢。其实在官方git中也有提示，解决这个问题需要修改react-navigation源码：

找到src文件夹中的addNavigationHelpers.js文件,替换为如下文本即可：


 /**
 * @flow
 *
 * Helpers for navigation.
 */

import type {
  NavigationProp,
  NavigationParams,
  NavigationScreenProp,
  NavigationNavigateAction,
} from './TypeDefinition';

import NavigationActions from './NavigationActions';
import invariant from './utils/invariant';

export default function<S: *>(navigation: NavigationProp<S, NavigationAction>) {
  // 添加点击判断
  let debounce = true;
  return {
      ...navigation,
      goBack: (key?: ?string): boolean =>
  navigation.dispatch(
      NavigationActions.back({
        key: key === undefined ? navigation.state.key : key,
      }),
  ),
      navigate: (routeName: string,
      params?: NavigationParams,
      action?: NavigationAction,): boolean => {
    if (debounce) {
      debounce = false;
      navigation.dispatch(
          NavigationActions.navigate({
            routeName,
            params,
            action,
          }),
      );
      setTimeout(
          () => {
        debounce = true;
    },
      500,
    );
      return true;
    }
    return false;
  },
  /**
   * For updating current route params. For example the nav bar title and
   * buttons are based on the route params.
   * This means `setParams` can be used to update nav bar for example.
   */
  setParams: (params: NavigationParams): boolean =>
  navigation.dispatch(
      NavigationActions.setParams({
        params,
        key: navigation.state.key,
      }),
  ),
};
}

（7）解决goBack，根据路由名称返回指定界面
react-navigation默认不支持根据路由名返回指定界面，官方只提供了根据Key来做goBack的指定返回。解决这个问题同样需要修改react-navigation源码，在Navigation.goBack条件下添加对路由名的支持。找到/node_modules/react-navigation/src/routers/StackRouter.js, 全局搜索backRoute,将条件判断语句替换为如下代码：


        if (key) {  
          const backRoute = null;  
          if(key.indexOf('id') >= 0) {  
            backRoute = state.routes.find((route: *) => route.key === action.key);  
          } else {  
            backRoute = state.routes.find(route => route.routeName === action.key);  
          }  
          backRouteIndex = state.routes.indexOf(backRoute);  
        }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,425评论 4赞 361
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,058评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,186评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,848评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,249评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,554评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,830评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,536评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,239评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,346评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,999评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2赞 267

推荐阅读更多精彩内容

  • React Native —— react-navigation的使用
    在React Native中，官方已经推荐使用react-navigation来实现各个界面的跳转和不同板块的切换...
    xiaoyanger阅读 5,699评论 5赞 17
  • react-navigation使用详解
    react-navigation导航组件使用详解 注意了，如果有小伙伴们发现运行作者提供的react-naviga...
    光强_上海阅读 23,294评论 39赞 103
  • [React-Native]react-navigation 使用
    一、开源库介绍 今年1月份，新开源的React-natvigation库备受瞩目。在短短不到3个月的时间，gith...
    德山_阅读 2,132评论 0赞 19
  • 行吟三世
    对孩子最好的引诱是让他们去阅读。这样就算他们遇到糟糕的事，也会知道还有个备份的世界，那里有备份的梦想、备份的宁静、...
    高大杰阅读 147评论 1赞 0
  • meta
    meta charse="utf-8" meta http-equiv="X-UA-compatible" con...
    love2013阅读 170评论 0赞 0