React Native 系列(八) -- 导航
前言本系列是基于 导航什么是
你可能在很多地方听说过
NavigatorIOS讲解
常用属性barTintColor : 导航条的背景颜色 navigationBarHidden : 为true,隐藏导航栏。 shadowHidden : 是否隐藏阴影,true/false。 tintColor : 导航栏上按钮的颜色设置。 titleTextColor : 导航栏上字体的颜色 。 translucent : 导航栏是否是半透明的,true/false。 常用方法push(route) : 加载一个新的页面(视图或者路由)并且路由到该页面。 pop():返回到上一个页面。 popN(n):一次性返回N个页面。当 N=1 时,相当于 pop() 方法的效果。 replace(route):替换当前的路由。 replacePrevious(route):替换前一个页面的视图并且回退过去。 resetTo(route):取代最顶层的路由并且回退过去。 popToTop():回到最上层视图。 NavigatorIOS使用步骤
实战演练效果图: 我们先创建一个 export default class HelloViewCompnent extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> 欢迎光临Scott博客,点击我跳转 </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'white',},welcome: { fontSize: 20,textAlign: 'center',margin: 10,}); 然后我们在 import React,{ Component,PropTypes } from 'react'; import { AppRegistry,StyleSheet,Text,View,NavigatorIOS,} from 'react-native'; import HelloView from './HelloViewCompnent' export default class RNDemoOne extends Component { render() { return ( <NavigatorIOS style={{flex: 1}} initialRoute={{ component: HelloView,}} /> ); } } AppRegistry.registerComponent('RNDemoOne',() => RNDemoOne); 运行项目,可以看到现在界面上有一个导航栏了。 接下来我们来实现界面跳转,以及传递值到下一个界面。 constructor(props,context) { super(props,context); this._onPressed = this._onPressed.bind(this); } _onPressed(){ AlertIOS.alert("点击了") } render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this._onPressed} activeOpacity={1}> <Text style={styles.welcome}> 欢迎光临Scott博客,点击我跳转 </Text> </TouchableOpacity> </View> ); } 我们再创建一个 render() { return ( <View style={styles.container}> <Text style={styles.welcome}> 这是上个界面传递过来的数据: {this.props.name} </Text> </View> ); } 然后修改 _onPressed(){ this.props.navigator.push({ component: Detail,onRightButtonPress: ()=> { this.props.navigator.pop() },}) } 到此为止,保存代码,选中模拟器,command + R 刷新界面,看起来和效果图是一样的。 React Navigation由于 React Navigation 导入首先需要在项目中导入,在项目目录下,终端执行 sudo yarn add react-navigation React Navigation 介绍该库包含三类组件:
由于篇幅以及本文标题,在这里,我们只讲述 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:初始路由参数 实战演练由于篇幅原因,就不做太多说明了,直接上代码吧,如果有不懂的问题,可以评论里面讨论。 我们先创建一个 import HelloView from './HelloViewComponent' export default class RNDemoTwo extends Component { render() { return ( <HelloView/> ); } } 接下来,我们修改 import { AppRegistry,TouchableOpacity,Button,AlertIOS,} from 'react-native'; import {StackNavigator} from 'react-navigation' import DetailComponent from './DetailComponent' import ThreeComponent from './Three' class HelloViewCompnent extends Component { // 配置导航栏属性 static navigationOptions = { headerTitle: "首页",headerBackTitle: null,headerRight: <Button title={"右侧按钮"} onPress={()=>{AlertIOS.alert("点击右侧按钮")}}/> } render() { return ( <View style={styles.container}> <TouchableOpacity onPress={()=>{ this.props.navigation.navigate('Detail',{name: 'scott'}) }} activeOpacity={1}> <Text style={styles.welcome}> 欢迎光临Scott博客,点击我跳转 </Text> </TouchableOpacity> </View> ); } } const SimpleApp = StackNavigator({ Home: { screen: HelloViewCompnent,Detail: { screen: DetailComponent,Three: { screen: ThreeComponent,} },{ headerMode : 'screen',}) export default SimpleApp const styles = StyleSheet.create({ container: { flex: 1,}); 注意点:此处向外提供出去的组件是 export default class Detail extends Component { static navigationOptions = { headerTitle: '详情',} render() { return ( <View style={styles.container}> <TouchableOpacity activeOpacity={0.5} onPress={this._onPress.bind(this)}> <Text style={styles.welcome}> 这是上个界面传递过来的数据: {this.props.navigation.state.params.name} 点击我pop </Text> </TouchableOpacity> </View> ); } _onPress(){ this.props.navigation.navigate("Three") } } const styles = StyleSheet.create({ container: { flex: 1,});
哈哈,是不是很有成就感了。 Navigator
Navigator 导入在之前的版本可以直接导入: import { AppRegistry,Navigator,} from 'react-native'; 但是从
yarn add react-native-deprecated-custom-components
安装好之后,就可以看到 直接在项目中导入就行: import {Navigator} from 'react-native-deprecated-custom-components' Navigator 使用步骤
this.props.navigator.push({ component: Detail,}) 可以发现, 参考文章:
致谢如果发现有错误的地方,欢迎各位指出,谢谢! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |