您的当前位置:首页正文

react-navigation使用总结(附代码)

时间:2023-11-30 来源:站点网
这次给大家带来react-navigation使用总结(附代码),react-navigation使用的注意事项有哪些,下面就是实战案例,一起来看一下。

看了官方文档的导航器对比,发现现在主推的方案是一个单独的导航库react-navigation,据说它的使用十分简单。我就写个demo,试了一下。

一、主要构成

按使用形式主要分三部分:

  1. StackNavigator: 类似于普通的Navigator,屏幕上方导航栏

  2. TabNavigator: 相当于ios里面的TabBarController,屏幕下方的标签栏

  3. DrawerNavigator: 抽屉效果,侧边滑出

二、使用

1.新建项目

react-native init ComponentDemo

2. 在应用中安装此库

npm install --save react-navigation

安装完发现是beta版本(v1.0.0-beta.7) ,竟然有坑?!一会儿我们会详细说这个坑~

3.测试TabNavigator、StackNavigator和DrawerNavigator

(1)新建HomePage.js

import React from 'react';import { StyleSheet, View, Text, Button, Image} from 'react-native';import { StackNavigator, TabNavigator} from 'react-navigation';import ChatScreen from './ChatScreen';import MinePage from './MinePage';class HomePage extends React.Component{ static navigationOptions={ title: '首页',//设置标题内容 header:{ backTitle: ' ',//返回按钮标题内容(默认为上一级标题内容) } } constructor(props) { super(props); } render() { const {navigate} = this.props.navigation; return ( <View style={styles.container}> <Text style={{padding:10}}>Hello, Navigation!</Text> <Button onPress={() => navigate('Chat',{user:'Sybil'})} title="点击跳转"/> </View> ) }}const MainScreenNavigator = TabNavigator({ Home: { screen: HomePage, navigationOptions: { tabBar: { label: '首页', icon: ({tintColor}) => ( <Image source={require('./image/bar_home_nomarl@3x.png')} style={[{tintColor: tintColor},styles.icon]} /> ), }, } }, Certificate: { screen: MinePage, navigationOptions: { tabBar: { label: '我的', icon: ({tintColor}) => ( <Image source={require('./image/bar_center_normal@3x.png')} style={[{tintColor: tintColor},styles.icon]} /> ), }, } },}, { animationEnabled: false, // 切换页面时不显示动画 tabBarPosition: 'bottom', // 显示在底端,android 默认是显示在页面顶端的 swipeEnabled: false, // 禁止左右滑动 backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab, none 为不跳转 tabBarOptions: { activeTintColor: '#008AC9', // 文字和图片选中颜色 inactiveTintColor: '#999', // 文字和图片默认颜色 showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示 indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了 style: { backgroundColor: '#fff', // TabBar 背景色 }, labelStyle: { fontSize: 12, // 文字大小 }, },});const styles = StyleSheet.create({ container:{ flex: 1, backgroundColor:'#fff' }, icon: { height: 22, width: 22, resizeMode: 'contain' }});const SimpleApp = StackNavigator({ Home: {screen: MainScreenNavigator}, Chat:{screen:ChatScreen},});export default SimpleApp;

(2)新建ChatScreen.js

import React from 'react';import { Button, Image, View, Text} from 'react-native';class ChatScreen extends React.Component { static navigationOptions = { title:'聊天', }; render() { const {params} = this.props.navigation.state; return ( <View style={{backgroundColor:'#fff',flex:1}}> <Text style={{padding:20}}>Chat with {params.user}</Text> </View> ); }}export default ChatScreen;

(3)新建MinePage.js

import React,{Component} from 'react';import { Button, Image, View, Text, StyleSheet} from 'react-native';import { DrawerNavigator} from 'react-navigation';import MyNotificationsScreen from './MyNotificationsScreen';class MinePage extends Component{ static navigationOptions = { title:'我的', drawerLabel: '我的', // Note: By default the icon is only shown on iOS. Search the showIcon option below. drawerIcon: ({ tintColor }) => ( <Image source={require('./image/chat@3x.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), }; render(){; return( <View style={{backgroundColor:'#fff',flex:1}}> <Text style={{padding:20}}>Sybil</Text> <Button style={{padding:20}} onPress={() => this.props.navigation.navigate('DrawerOpen')} title="点击打开侧滑菜单" /> </View> ); }}const styles = StyleSheet.create({ icon: { width: 24, height: 24, },});const MyChatNavigator = DrawerNavigator({ MyChat: { screen: MinePage, }, Notifications: { screen: MyNotificationsScreen, },},{ drawerWidth: 220, // 抽屉宽 drawerPosition: 'left', // 抽屉在左边还是右边 // contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件 contentOptions: { initialRouteName: MinePage, // 默认页面组件 activeTintColor: '#008AC9', // 选中文字颜色 activeBackgroundColor: '#f5f5f5', // 选中背景颜色 inactiveTintColor: '#000', // 未选中文字颜色 inactiveBackgroundColor: '#fff', // 未选中背景颜色 style: { // 样式 } }});export default MyChatNavigator;

(4)编写MyNotificationsScreen.js

import React from 'react';import { StyleSheet, View, Text, Button, Image} from 'react-native';class MyNotificationsScreen extends React.Component { static navigationOptions = { title:'通知', drawerLabel: '通知', drawerIcon: ({ tintColor }) => ( <Image source={require('./image/notif@3x.png')} style={[styles.tabIcon, {tintColor: tintColor}]} /> ), }; render() { return ( <View style={{backgroundColor:'#fff'}}> <Button style={{padding:20}} onPress={() => this.props.navigation.navigate('DrawerOpen')} title="点击打开侧滑菜单" /> <Button onPress={() => this.props.navigation.goBack()} title="返回我的界面" /> </View> ); }}const styles = StyleSheet.create({ tabIcon: { width: 24, height: 24, },});export default MyNotificationsScreen;

(5)运行

报错啦?这就是上面我们所说的坑~

什么原因呢?原来是测试版的bug,在目录中找到node_modules/react-navigation/src/views/Header.js的第12行,删除它就OK了~

Ps:遗憾的是这个错误我没有留图啊~在我即将发表这篇文章的时候,最新版已经变为(v1.0.0-beta.9)了,最新版已经将上述的bug修改了!

好了,再次运行~

上一个动态效果图:

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

node puppeteer实现网站登录步骤详解(附代码)

Vue数据监听watch使用说明

小编还为您整理了以下内容,可能对您也有帮助:

使用ReactNavigation注意事项有哪些

这次给大家带来使用React Navigation注意事项有哪些,使用React Navigation的注意事项有哪些,下面就是实战案例,一起来看一下。

在React Native的开发中,使用到react navigation框架时遇到了不少问题。主要是安卓和iOS中相对不协调的地方,特此记录

一、Navigation Bar

使用navigationbar的时候遇到如下的问题

1.navigation bar的底部有一条黑线

本意做一个bar的颜色和页面颜色一致的页面。只有顶部有两个其他按钮的时候。发现bar的底部有一条黑线。导致bar不能很好的匹配想要的页面效果。在header中设置一下代码中后可去除

static navigationOptions = {

...

headerStyle: {

...

borderBottomWidth: 0,

},

}2. android 的 Bar底部有一条阴影,自定义Bar背景图无法填充满

react navigation bar在安卓中默认会有一个高度。带来的视觉效果是底部会有一条阴影。而且造成另外一个比较头疼的效果是如果使用了带背景图的自定义Bar时。会发现背景图有覆盖不全的效果。两侧总有一些间隙。iOS中则不会出现此问题。将elevation属性置零后可解决这个问题

static navigationOptions = {

...

headerStyle: {

...

elevation: 0,

},

}3.android 中Bar标题居中问题

在安卓中,bar 的标题是居左的。iOS则默认居中。可以通过以下写法居中

static navigationOptions = {

...

headerTitleStyle: {

//此属性是标题的Style属性。可以接受<Text>标签的style

...

alignSelf: "center",

},

}在左侧没有按键的时候。这样写就足够了。但是如果左侧有个返回键或者自定义的其他按键。在安卓中标题就会发生偏移。解决办法是右侧添加一个空按钮

static navigationOptions = {

...

headerRight: <View />

}4.带背景图的Navgation Bar

与源生不同。react navigation bar中并没有背景图这一属性。也就是说我们要使用带背景图的navigation bar的时候必须要使用自定义的view。

import {Header} from "react-navigation";

//header 需导入

const ImageHeader = props => (

<View>

<Image

style={{position: "absolute", zIndex: -1, width: "100%", height: "100%", resizeMode: "cover"}}

source={require(...)}

/>

<Header {...props} style={{backgroundColor: "transparent"}} />

</View>

);

static navigationOptions = {

...

headerStyle: {

//背景颜色必须为透明,不然无法透出底部图片

backgroundColor: "transparent",

//安卓中不添加此属性会导致背景图无法铺满

elevation: 0,

},

header: props => {

return <ImageHeader {...props} />;

},

}5.当StackNavigator与DrawerNavigator嵌套使用时手势冲突问题

当DrawerNavigator嵌套StackNavigator时。进入StackNav的二级界面后返回手势与打开DrawerNav打开菜单冲突。

static navigationOptions = {

...

//禁止打开菜单

drawerLockMode: "locked-closed",

//允许使用返回手势

gesturesEnabled: true,

}此设置按照需求自行修改

5.Navgation Bar高度不一致问题

使用自定义的Bar时。安卓和iOS高度不一致。Android计算Nav高度是从手机顶部开始计算。而iOS默认会向下偏移状态栏的高度。要做到效果统一。需要将安卓的Bar的paddingTop属性设为状态栏高度

import {StatusBar, Platform} from "react-native";

navigationOptions = {

...

headerStyle: {

...

paddingTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight,

},

}6.navigation Bar上使用自定义按钮

使用headerRight 或者 headerLeft 可以定制按钮或者View

static navigationOptions = {

...

headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={...}>

<Text style={styles.NavSureButton}>btn</Text>

</TouchableOpacity>)

}但是如果onPress方法要用到this.props、this.state或者是类中的其他方法的时候就会出现问题

在每个页面的类中,我们使用static navigationOptions={...}来配置navigation的一些配置。但是由于static 修饰的属性属于类的静态属性。无法调用this的属性方法。所以我们需要使用this.props.navigation.setParams({key:value ...})方法来设置header按钮的点击事件。

class Demo extends React,Component{

componentWillMount() {

//绑定方法

this.props.navigation.setParams({rightOnPress: this.rightBtnOnPress});

}

//点击方法

rightBtnOnPress = ()=>{

...

}

static navigationOptions = ({navigation}) => {

const params = navigation.state.params || {};

let navigationOptions = {

...

headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={params.rightOnPress}>

<Text style={styles.NavSureButton}>btn</Text>

</TouchableOpacity>)

}

return navigationOptions;

};

...

}相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

vue组件发布到npm步骤分析

Vue多级组件provide/inject使用详解

react-navigation从引导页跳转到主页,物理回退键,不能再返回到引导页,代码怎么写?

首先要确认已经配置好react-native的环境。

# 创建一个native应用,SimpleApp,然后进入项目目录

react-native init SimpleApp

cd SimpleApp

# 通过npm安装最新版本的react-navigation

npm install --save react-navigation

# 运行程序

react-native run-android

引入Stack Navigator

对于我们的应用程序,我们想要使用堆栈式导航器,因为我们想要一个概念的“堆栈”导航,其中每个新屏幕都放在堆栈顶部,然后从堆栈顶部移除一个屏幕。

import React from 'react';import { AppRegistry, Text,} from 'react-native';import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome world', }; render() { return <Text>Hello, Navigation!</Text>; }}

const SimpleApp = StackNavigator({ Home: { screen: HomeScreen },});

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

屏幕的title在静态导航选项中是可配置的,在这里可以设置许多选项来配置导航器中的屏幕显示。追问我没问这个,我问的问题是由A页面跳转到B页面之后,B页面不能返回上一个页面,代码怎么写?

ReactNative的优缺点是什么

React Native是一个用于构建用户界面的JavaScript库,它主要由JavaScript和JSX语言编写。是针对于构建移动应用程序开发的框架

React Native

React Native应用程序使用JavaScript和XML-esque标记(称为JSX)的混合编写。 此应用程序将使用真实的移动UI组件呈现,而不是webview,并且外观和感觉与任何其他移动应用程序一样。React Native还公开了用于平台API的JavaScript接口,因此React Native应用程序具有访问平台的功能,如手机摄像头或用户的位置。

React Native的优点

(1)React Native可将标记元素转化为真实的原生UI元素,利用在任何平台上所呈现视图的现有方法

(2)React Native与主UI线程分开工作,所以应用程序可以在不牺牲功能的前提下保持最大的性能

(3)React Native创建的应用程序允许开发人员创建和构建跨平台应用程序,这些应用程序是客户端的完全本机应用程序,因为它使用

基于iOS或Android组件构建的JavaScript组件。节省了跨平台应用程序开发时间,并且应用程序维护更便宜

(4)在组件开发方面,Native移动应用程序使用大量代码和类来在UI中进行渲染,但是React Native只使用组件名称并声明其属性,它

将在UI中呈现这两个平台都为移动应用开发节省了时间。

React Native的缺点:

(1)与其他Android和iOS编程语言相比,React Native还不成熟。它仍处于改进阶段,这可能会对应用程序产生负面影响,尤其是每次发布新更新时,开发人员都必须进行大量更改并定期进行升级。应用程序在升级过程中也会遇到了很多问题。

(2)除了仅编写代码之外,开发人员有时还需要为与React Native不兼容的组件编写额外的本机代码,有时候与本机组件相比,React Native组件变得更差

(3)它缺乏安全稳健性,React Native是一个JavaScript库和开源框架,它在安全性方面存在重大问题

(4)React Native在最初渲染之前需要花费大量时间来初始化运行,因为JavaScript线程需要时间来初始化

总结:

React Native是一个很有用的框架,使开发人员能够使用他们现有的JavaScript知识创建强大的移动应用程序。它提供更快的移动开发,以及跨平台性和高效的代码共享,而且还不会牺牲用户的体验或应用程序质量,但由于它才刚发展还存在许多不足之处,相信以后它会越来越完善

TypeError: undefined is not an object (evaluating '_this.view._component.measureInWindow')

使用react-navigation库遇到:

TypeError: undefined is not an object (evaluating '_this.view._component.measureInWindow')

找了很久没找到原因,上网查才知道:必须要设置第一个页面默认的navigationOptions = { header: null };

发现如果使用drawer还是报错,继续参考: https://github.com/react-navigation/react-native-safe-area-view/issues/118

亲测,可以了!

站点网还为您提供以下相关内容希望对您有帮助:

使用ReactNavigation注意事项有哪些

在header中设置一下代码中后可去除static navigationOptions = { ... headerStyle: { ... borderBottomWidth: 0, }, }2. android 的 Bar底部有一条阴影,自定义Bar背景图无法填充满react navigation bar在安卓中默认会...

react-navigation怎么添加导航栏

1.使用NavigatorIOS控件设置导航条颜色 2.增加一个属性即可解决 &lt;NavigatorIOS style = {BmacStyles.container} initialRoute={{ component: MainPage,title: '',leftButtonTitle:'左边按钮',tintColor:'#ffffff',//白色 ...

react-navigation 头部返回箭头怎么改颜色

// 如果是导航栏的App,直接在按钮响应事件中,这样就可以看到你要的效果。 UIViewController *vc = [[[UIViewController alloc] init] autorelease]; vc.title = @"新页面"; [self.navigationController pushViewControll...

react native ant design

Provider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。我们暂时只提供英语,中文两种语言支持( 默认语言是中文 ),所有语言包可以在 这里 找到。如果你找不到你需要的语言包,欢迎你在 英文语...

如何用 React Native 创建一个iOS APP

首先,我们先来安装相应的工具。React native 是使用 Node.js 来 创建 JavaScript 代码。如果你已经在你电脑上安装上了这些工具,你可以跳过下面这几步。推荐使用 Homebrew的方式来安装 nvm,watchman 和 flow。在Mac下,如果...

react native里webview怎么设置高度自适应

第一个方法设置webview推荐使用的窗口,设置为true。第二个方法是设置webview加载的页面的模式,也设置为true。这方法可以让自己的页面适应手机屏幕的分辨率,完整的显示在屏幕上,可以放大缩小。两种方法都试过,推荐使用第二...

react-native 有没有类似mjextension,jsonmodel,mantle

详尽用法主要参考 main.m中的各个函数 以及NSObject+MJKeyValue.h 回到顶部 回到顶部 如何使用MJExtension cocoapods导入:pod 'MJExtension' 手动导入: 将MJExtensionExample/MJExtensionExample/MJExtension文件夹中的所有源代码拽...

hydrate react怎么用

在客户端进行 hydrate:将生成的 HTML 发送到客户端后,在客户端的 JavaScript 代码中,您需要使用 hydrate 方法将服务器端渲染的内容与客户端的组件绑定。import { hydrate } from 'react-dom';import App from './App'...

react 怎样跳转到另一个页面

return Navigator.SceneConfigs.FloatFromBottom// }总结:ReactNative结合了Web应用和Native应用的优势,可以使用JavaScript来开发iOS和Android原生应用。在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染等。

怎样使用开发react应用脚手架

2.1 简单的安装使用create-react-app安装起来实在是太简单,只需要一条命令,不像别的脚手架,还需要去clone整个脚手架的源码,再在那基础上改。npm install -g create-react-app装完之后,生成一个新的项目,可以使用...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top