react-navigation 页面跳转 及 传参
2024-09-01 02:53:10
1.配置路由
export const AppNavigator = createStackNavigator (
{
Guide: { // 引导页
screen: GuidePage
},
Launch: { // 启动页
screen: LaunchPage
},
Login: { // 登录页
screen: LoginPage
},
Main: { // 主页面
screen: MainPage
},
HomeDetail: { // 首页--详情页
screen: HomeDetailPage
},
MineList: { // 我的--列表页
screen: MineListPage
},
MineCatalog: { // 我的--目录页
screen: MineCatalogPage
},
MineDetail: { // 我的--详情页
screen: MineDetailPage
},
TeasetApp: {
screen: TeasetApp,
navigationOptions: {
header: null
}
}
},
{
initialRouteName: 'Login', // 默认启动页
navigationOptions: {
header: null
}
}
);
2.设置 顶部导航栏
//设置顶部导航栏的内容
static navigationOptions = ({navigation, screenProps}) => ({
//左侧标题
headerTitle: '我是主页面',
//设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题
headerBackTitle: null,
//顶部标题栏的样式
headerStyle: styles.headerStyle,
//顶部标题栏文字的样式
headerTitleStyle: styles.headerTitleStyle,
});
3.页面跳转
this.props.navigation.navigate('HomeDetail', {detail: item})
4.接收参数
this.props.navigation.state.params.detail
.
最新文章
- bzoj3648: 寝室管理(环套树+点分治)
- Web前端框架
- 在input中实现点点点与当鼠标移上去时显示剩余的字
- mysql开启登录日志和sql日志 排查错误
- [ACM_动态规划] Palindrome
- cookie的三种操作方法
- JFrame面板
- Qt-获取网络接口信息的综合示例
- CentOS6.x安装配置nginx [转]
- Oracle触发器(trigger):view,schema,database
- JAVA基础知识(2)--堆栈和递归的操作
- Linux(CentOS6.5)下编译安装MySQL Community Server 5.7.12
- 剑指Offer——算法复杂度中的O(logN)底数是多少
- CSS3 :nth-child() 选择器---挖坑
- js中的数据类型、以及浅拷贝和深拷贝
- [JavaScript] Frequently used method or solutions for issues
- 线上MYSQL同步报错故障处理方法总结
- OpenVPN 2.2.1 之后期维护
- java常用设计模式二:工厂模式
- ios实例开发精品文章推荐(7.23)