频道导航

react-native导航栏react-navigation

2020-06-24 React 前端之家

前端之家收集整理的这篇文章主要介绍了react-native导航栏react-navigation，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

学习交流：https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群：806870562

react-native使用react-navigation（https://reactnavigation.org/）进行导航功能开发。

效果图

使用

@H_502_32@ 安装react-navigation这个包，在终端使用如下命令（需要在项目项目中执行）：

@H_502_32@ 方法1：yarn add react-navigation

@H_502_32@ 方法2：npm install --save react-navigation

@H_502_32@

@H_502_32@ 使用

@H_502_32@ 1、配置

@H_502_32@ （1）在App.js文件中的配置

@H_502_32@ 导入头文件：import { createStackNavigator } from 'react-navigation';

@H_502_32@ 注册并初始化路由页面： @H_502_32@ const RootStack = createStackNavigator( @H_502_32@ { @H_502_32@ // 定义路由页面 @H_502_32@ Home: NavigationPage, @H_502_32@ homeNext: NavigationPageNext, @H_502_32@ Details: NavigationPageDetail, @H_502_32@ }, @H_502_32@ { @H_502_32@ // 初始化首页 @H_502_32@ initialRouteName: 'Home', @H_502_32@ } @H_502_32@ ); @H_502_32@ 使用路由： @H_502_32@ export default class App extends React.Component { @H_502_32@ render() { @H_502_32@ return <RootStack />; @H_502_32@ } @H_502_32@ } @H_502_32@ （2）在其他被注册成路由的页面中配置 @H_502_32@
@H_502_32@
@H_502_32@ 2、自定义样式 @H_502_32@ title：标题，不推荐使用（如果设置了这个导航栏和标签栏的title就会变成一样的） @H_502_32@ headerTitle：设置导航栏标题，推荐 @H_502_32@ header：可以设置一些导航的属性，隐藏顶部导航栏设置为null @H_502_32@ headerBackTitle：设置@R_473_404@面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null @H_502_32@ headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回" @H_502_32@ headerRight：设置导航条右侧。可以是按钮或者其他视图控件 @H_502_32@ headerLeft：设置导航条左侧。可以是按钮或者其他视图控件 @H_502_32@ headerStyle：设置导航条的样式。背景色，宽高等 @H_502_32@ headerTitleStyle：设置导航栏文字样式 @H_502_32@ headerBackTitleStyle：设置导航栏‘返回’文字样式 @H_502_32@ headerTintColor：设置导航栏颜色 @H_502_32@ headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0 @H_502_32@ gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭 @H_502_32@ 如： @H_502_32@ export default class NavigationPage extends React.Component { @H_502_32@
@H_502_32@ // 配置导航栏 @H_502_32@ static navigationOptions = { @H_502_32@ // 导航栏标题，不推荐 @H_502_32@ title: 'Home', @H_502_32@ // 设置导航栏颜色 @H_502_32@ headerTintColor: "green", @H_502_32@ // 导航条的样式，如背景色，宽高等 @H_502_32@ headerStyle:{ @H_502_32@ backgroundColor:"#1E90FF", @H_502_32@ // 导航栏文字样式 @H_502_32@ headerTitleStyle:{ @H_502_32@ paddingLeft:20, @H_502_32@ fontSize:30 @H_502_32@ }, @H_502_32@ }; @H_502_32@ } @H_502_32@ 或： @H_502_32@ export default class NavigationPageNext extends React.Component { @H_502_32@
@H_502_32@ constructor(props){ @H_502_32@ super(props); @H_502_32@ _this = this; @H_502_32@ } @H_502_32@
@H_502_32@ // 配置导航栏 @H_502_32@ static navigationOptions = { @H_502_32@ // 导航栏标题，推荐使用 @H_502_32@ headerTitle: ( @H_502_32@ <Button title="homeNext" @H_502_32@ color="black" @H_502_32@ onPress={() => alert("点击民航栏标题")}> @H_502_32@ </Button> @H_502_32@ ), @H_502_32@ // 导航栏返回按钮标题 @H_502_32@ headerBackTitle:"返回", @H_502_32@ // 导航条左侧，可以是按钮或者其他视图控件 @H_502_32@ headerLeft: ( @H_502_32@ <TouchableOpacity onPress={() =>{ @H_502_32@ _this.props.navigation.goBack(); @H_502_32@ }}> @H_502_32@ <Image style={{marginLeft:20,width:30,height:30}} source={require("../../Resources/leftBack.png")} resizeMode='center'></Image> @H_502_32@ </TouchableOpacity> @H_502_32@ ), @H_502_32@ // 导航条右侧。可以是按钮或者其他视图控件 @H_502_32@ headerRight: ( @H_502_32@ <Button title="Info" @H_502_32@ color="red" @H_502_32@ onPress={() => { @H_502_32@ _this.props.navigation.navigate('Details') @H_502_32@ }}/> @H_502_32@ ), @H_502_32@ }; @H_502_32@ } @H_502_32@
@H_502_32@ 3、转场，页面跳转 @H_502_32@ （1）不带参数，且过滤历史 @H_502_32@ // navigae过滤现有导航，即如果已导航到视图B，再导航时不会导航 @H_502_32@ this.props.navigation.navigate('homeNext') @H_502_32@ （2）带参数，且过滤历史 @H_502_32@ // navigae不过滤现有导航，即如果已导航到视图B，再导航时继续导航 @H_502_32@ this.props.navigation.navigate('homeNext',{message:"导航过来了"}) @H_502_32@ （3）不带参数，且不过滤历史 @H_502_32@ // push过滤现有导航，即如果已导航到视图B，再导航时不会导航 @H_502_32@ this.props.navigation.push('homeNext') @H_502_32@ （4）带参数，且不过滤历史 @H_502_32@ // push不过滤现有导航，即如果已导航到视图B，再导航时继续导航 @H_502_32@ this.props.navigation.push('homeNext',{message:"导航过来了"}) @H_502_32@ （5）返回 @H_502_32@ this.props.navigation.goBack() @H_502_32@ 或： @H_502_32@ this.props.navigation.pop() @H_502_32@ 或（根页面）： @H_502_32@ this.props.navigation.popToTop() @H_502_32@
@H_502_32@ 4、传值 @H_502_32@ （1）进入B页面时，A页面传值 @H_502_32@ this.props.navigation.navigate('homeNext',{message:"导航过来了"}) @H_502_32@ 或： @H_502_32@ this.props.navigation.push('homeNext',{message:"导航过来了"}) @H_502_32@ （2）进入B页面后，接收并使用A页面传过来的值 @H_502_32@ <Text>导航栏使用: {this.props.navigation.state.params.message}</Text>