ReactNavigation的个人理解

ReactNavigation的个人理解

对于ReactNavigation我的理解就是react-native的视图管理中心,控制着视图之间的联系,以及定义一些交互方法。这是我们开始coding的第一步,就是根据需求选择合适的页面导航。

Navigator是用来定义应用程序的导航结构,配置的标题栏和选项卡栏。我把它理解成,就是把几个视图声明一个彼此之间的关系,定义他们之间的联系方式以及出入行为等等。

它一共有三种导航器类型:

StackNavigator : 就是普通的堆栈式页面,一次渲染一个屏幕以及屏幕之间的转换。

配置方法:const ModalStack = StackNavigator(

{

//路由名

Home: {

//视图名

screen: MyHomeScreen,

},

Profile: {

screen: MyProfileScreen,

},

}

)

TabNavigator :渲染出一个标签栏页面,可以在多个屏幕之间切换,就是一般应用程序的底部几个主页面。

配置方法:const MyApp = TabNavigator({

Home: {

screen: MyHomeScreen,

},

Notifications: {

screen: MyNotificationsScreen,

},

},{

//配置标签页的一些参数,比如位置,动画,以及图标样式等。

tabBarPosition: 'top',

animationEnabled: true,

tabBarOptions: {

activeTintColor: '#e91e63',

},

});

DrawerNavigator :从屏幕左侧滑入的抽屉式导航,比如网易云音乐的侧滑。

配置方法:

const MyApp = DrawerNavigator({

Home: {

screen: MyHomeScreen,

},

Notifications: {

screen: MyNotificationsScreen,

},

});

S71215-205155.jpg

它们三个彼此都有类似的属性,用来自定义一些风格和样式等等。

这里介绍一下StackNavigator的一些属性

title:标题,如果设置了这个导航栏和标签栏的title就会变成一样的,不推荐使用

header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为null

headerTitle:设置导航栏标题,推荐

headerBackTitle:设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。可以自定义,也可以设置为null

headerTruncatedBackTitle:设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回"

headerRight:设置导航条右侧。可以是按钮或者其他视图控件

headerLeft:设置导航条左侧。可以是按钮或者其他视图控件

headerStyle:设置导航条的样式。背景色,宽高等

headerTitleStyle:设置导航栏文字样式

headerBackTitleStyle:设置导航栏‘返回’文字样式

headerTintColor:设置导航栏颜色

headerPressColorAndroid:安卓独有的设置颜色纹理,需要安卓版本大于5.0

gesturesEnabled:是否支持滑动返回手势,iOS默认支持,安卓默认关闭

navigation又有5个方法:navigate, goBack, state, setParams, dispatch

Navigate:导航到其他路线。这个很好理解,就是调用方法导航到其它页面去而已。

Back :回到之前的状态。返回到上一个屏幕并关闭当前屏幕。

Set Params : 为给定路线设置参数。给新的路由状态页面设置参数。

下面两个不是很理解!

Reset: 用新状态替换当前状态

Init :用于在状态未定义时初始化第一个状态。

一段时间没看文档了,对于react-navigation的理解不是很多,欢迎补充!

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容