【React Native】react-Navigation之StackNavigator
来源:互联网 发布:东方的漫画软件 编辑:程序博客网 时间:2024/05/25 21:32
Navigator一直是被用作导航跳转的组件,但是到0.44版本后就移除,使用时需要引入react-deprecated-custom-component这个模块,但是最近使用这个模块中的Navigator组件依然出现问题,错误指向一个library文件。
只得使用最新的导航库React-Navigation中的StackNavigator完成页面跳转。(导航库React-Navigation中有三个主要组件:StackNavigator,TabNavigator,DrawerNavigator。)
引入
对于使用npm的,使用命令:
npm install react-navigation -save
对于使用yarn的,使用命令:
yarn add react-navigtion
然后在项目中引入组件:
import { StackNavigator } from ‘react-navigation’;
就可以使用StackNavigation了
demo演示
StackNavigator的使用,先从一个Demo示例开始:
进入应用是主界面(HomeScreen),通过点击按钮进入详情页(DetailScreen),详情页将主界面中的信息显示(详情页中的price:$300是写在主界面中的数据)。
代码实现(注释解释用法):
index.android.js:
import { AppRegistry,} from 'react-native';import rootApp from './rootApp'AppRegistry.registerComponent('mynavigation', () => rootApp);
主要组件rootApp.js:
'use strict'import React from 'react';import { Text,View,Button,StyleSheet,} from 'react-native';import { StackNavigator } from 'react-navigation';import DetailScreen from './DetailScreen';class HomeScreen extends React.Component { static navigationOptions = { title: 'Main',//设置标题内容 }; render() { const { navigate } = this.props.navigation; return ( <View> <Text style={styles.text}>Navigation主页面!</Text> <Button onPress={() => navigate('Detail',{description:'price:$300'})} title="GET DETAIL"/> </View> ); }}const styles=StyleSheet.create({ text:{ margin:10, fontSize:18, }})//将HomeScreen和DetailScreen在StackNavigator中注册const SimpleApp = StackNavigator({ Home: {screen: HomeScreen}, Detail:{screen:DetailScreen},});export default SimpleApp;
这里语句 navigate(‘Detail’,{description:’price:$300’}) 实现跳转,指跳转页面是“Detail”,而这个“Detail”在下面const SimpleApp = StackNavigator….语句中注册,就会跳转到Detail中screen指定的DetailScreen组件。
详情页:DetailScreen.js:
'use strict'import React,{Component} from 'react';import {View,Text} from 'react-native';class DetailScreen ex Component{ static navigationOptions = { //detail页面标题 title:'detail', }; render(){ //DetailScreen页面在StackNavigator中注册过, // 可以通过this.props.navigation取到navigation对象,并获取params参数 const {params} = this.props.navigation.state; return( <View> <Text>通过params传递来如下信息: </Text> <Text style={{fontSize:18}}>{params.description}</Text> </View> ); }}export default DetailScreen;
重点在于可以通过this.props.navigation通过params取到description值来显示。
属性方法
StackNavigator属性:
上例在StackNavigator语句:
const SimpleApp = StackNavigator({ Home: {screen: HomeScreen}, Detail:{screen:DetailScreen},});
中,只定义了Home,Detail这两个页面,当然还可以定义其他页面,除了定义跳转页面,还可以定义其他属性(hello老文简书-查看属性介绍):
initialRouteName 默认显示界面
navigationOptions 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)
mode,页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
headerMode,导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏.
onTransitionStart: ()=>{ consol log(‘导航栏切换开始’); }, 回调函数。
onTransitionEnd: ()=>{ console.log(‘导航栏切换结束’);}, 回调函数。
StackNavigator中navigationOption属性参数
title: 导航栏的标题
header: 导航栏设置对象,取值如下:
visible: 导航栏是否显示
title: 导航栏的标题, 可以是字符串也可以是个组件
backTitle: 左上角的返回键文字, 默认是上一个页面的title
right: 导航栏右按钮
left: 导航栏左按钮
style: 导航栏的style
titleStyle: 导航栏的title的style
tintColor: 导航栏颜色
cardStack: 配置cardstack
gesturesEnabled: 是否允许右滑返回,在iOS上默认为true,在android上默认为false.
navigation
在StackNavigator中注册后的组件都有navigation这个属性. navigation又有5个参数:navigate, goBack, state, setParams, dispatch, 可以在组件下console.log一下this.props就能看到.
更多属性和配置详细介绍:hello老文的简书博客
属性介绍,转载来源:
作者:hello老文
链接:http://www.jianshu.com/p/7d435e199c96
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
1
- 【React Native】react-Navigation之StackNavigator
- React-navigation之StackNavigator
- React Native开发之React Navigation的StackNavigator 详解
- React Native入门(九)之导航组件React Navigation(1)StackNavigator
- React-navigation StackNavigator 使用攻略
- react-navigation之TabNavigator, StackNavigator使用配合redux
- React Native --react-navigation
- React Native react-navigation
- react-native结合react-navigation之TabNavigator
- React-native Navigation之TabNavigator
- react-navigation自定义StackNavigator页面跳转动画
- react-native 学习 ----- React Navigation
- React Native导航器之react-navigation使用
- React Native导航器之react-navigation使用
- React-native IT喵喵~路由之React Navigation
- React Native导航器之react-navigation使用
- React Native导航器之react-navigation使用
- 【React Native开发】- React Navigation的使用
- EF映射
- 最长上升子序列(LIS)
- 基于Tensorflow实现基本的线性回归(Linear regression)
- hdu 6197array array array(最长不下降子序列nlogn)
- 07-异常
- 【React Native】react-Navigation之StackNavigator
- java jdbc 增删改查
- Leetcode OJ 67 Add Binary [Easy]
- C++网络编程之Socket编程
- Java作业-元素检索与交换
- 总结
- wordcloud
- 长连接与短连接
- java中的构造函数