react-native导航栏react-navigation

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

react-native学习交流QQ群:806870562


react-native使用react-navigationhttps://reactnavigation.org/)进行导航功能开发。

效果图


使用

安装react-navigation这个包,在终端使用如下命令(需要在项目项目中执行):
方法1:yarn add react-navigation
方法2:npm install --save react-navigation

使用
1、配置
(1)在App.js文件中的配置
导入头文件:import { createStackNavigator } from 'react-navigation';
注册并初始化路由页面:
const RootStack = createStackNavigator(
{
// 定义路由页面
Home: NavigationPage,
homeNext: NavigationPageNext,
Details: NavigationPageDetail,
},
{
// 初始化首页
initialRouteName: 'Home',
}
);
使用路由:
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
(2)在其他被注册成路由的页面中配置


2、自定义样式
title:标题,不推荐使用(如果设置了这个导航栏和标签栏的title就会变成一样的)
headerTitle:设置导航栏标题,推荐
header:可以设置一些导航的属性,隐藏顶部导航栏设置为null
headerBackTitle:设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。可以自定义,也可以设置为null
headerTruncatedBackTitle:设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回"
headerRight:设置导航条右侧。可以是按钮或者其他视图控件
headerLeft:设置导航条左侧。可以是按钮或者其他视图控件
headerStyle:设置导航条的样式。背景色,宽高等
headerTitleStyle:设置导航栏文字样式
headerBackTitleStyle:设置导航栏‘返回’文字样式
headerTintColor:设置导航栏颜色
headerPressColorAndroid:安卓独有的设置颜色纹理,需要安卓版本大于5.0
gesturesEnabled:是否支持滑动返回手势,iOS默认支持,安卓默认关闭
如:
export default class NavigationPage extends React.Component {

// 配置导航栏
static navigationOptions = {
// 导航栏标题,不推荐
title: 'Home',
// 设置导航栏颜色
headerTintColor: "green",
// 导航条的样式,如背景色,宽高等
headerStyle:{
backgroundColor:"#1E90FF",
},
// 导航栏文字样式
headerTitleStyle:{
paddingLeft:20,
fontSize:30
},
};
}
或:
export default class NavigationPageNext extends React.Component {

constructor(props){
super(props);
_this = this;
}

// 配置导航栏
static navigationOptions = {
// 导航栏标题,推荐使用
headerTitle: (
<Button title="homeNext"
color="black"
onPress={() => alert("点击民航栏标题")}>
</Button>
),
// 导航栏返回按钮标题
headerBackTitle:"返回",
// 导航条左侧,可以是按钮或者其他视图控件
headerLeft: (
<TouchableOpacity onPress={() =>{
_this.props.navigation.goBack();
}}>
<Image style={{marginLeft:20, width:30, height:30}} source={require("../../Resources/leftBack.png")} resizeMode='center'></Image>
</TouchableOpacity>
),
// 导航条右侧。可以是按钮或者其他视图控件
headerRight: (
<Button title="Info"
color="red"
onPress={() => {
_this.props.navigation.navigate('Details')
}}/>
),
};
}

3、转场,页面跳转
(1)不带参数,且过滤历史
// navigae过滤现有导航,即如果已导航到视图B,再导航时不会导航
this.props.navigation.navigate('homeNext')
(2)带参数,且过滤历史
// navigae不过滤现有导航,即如果已导航到视图B,再导航时继续导航
this.props.navigation.navigate('homeNext', {message:"导航过来了"})
(3)不带参数,且不过滤历史
// push过滤现有导航,即如果已导航到视图B,再导航时不会导航
this.props.navigation.push('homeNext')
(4)带参数,且不过滤历史
// push不过滤现有导航,即如果已导航到视图B,再导航时继续导航
this.props.navigation.push('homeNext', {message:"导航过来了"})
(5)返回
this.props.navigation.goBack()
或:
this.props.navigation.pop()
或(根页面):
this.props.navigation.popToTop()

4、传值
(1)进入B页面时,A页面传值
this.props.navigation.navigate('homeNext', {message:"导航过来了"})
或:
this.props.navigation.push('homeNext', {message:"导航过来了"})
(2)进入B页面后,接收并使用A页面传过来的值
<Text>导航栏使用: {this.props.navigation.state.params.message}</Text>


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

番薯大佬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值