react-native构建基本页面3---路由配置
安装路由
// Main 才是项目的根组件
import React, { Component } from 'react'
import { View, Image, Text, ActivityIndicator } from 'react-native'
// 导入路由相关的组件
// Router: 就相当于 我们所学的 HashRouter
// Stack: 这是一个分组的容器,他不表示具体的路由,专门用来给路由分组的
// Scene:就表示一个具体的路由规则,好比 Route
import { Router, Stack, Scene } from 'react-native-router-flux'
// 导入App组件
import App from './App.js'
import MovieList from './components/movie/MovieList.js'
import MovieDetail from './components/movie/MovieDetail.js'
export default class Main extends Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return <Router sceneStyle={{ backgroundColor: 'white' }}>
<Stack key="root">
{/* 配置路由规则 */}
{/* 注意,所有的路由规则,都应该写到这个位置 */}
{/* 第一个 Scene 就是默认要展示的首页 */}
{/* key 属性,表示路由的规则名称,将来可以使用这个 key ,进行编程式导航,每一个路由规则,都应该提供一个 唯一的key, key不能重复 */}
<Scene key="app" component={App} title="" hideNavBar={true} />
{/* 电影列表的路由规则 */}
<Scene key="movielist" component={MovieList} title="热映电影列表" />
<Scene key="moviedetail" component={MovieDetail} title="电影详情" />
</Stack>
</Router>
}
}
react-native构建基本页面3---路由配置的更多相关文章
- React Native - 1 Windows下的环境配置(Windows+Android)
参考:https://facebook.github.io/react-native/docs/getting-started.html(要FQ) 网站上建议使用Chocolatey去配环境, ...
- webpack 配置react脚手架(四):路由配置
1. 由于 react-router 是集成了 react-router-dom 和 react-router-native的一起的,所以这里要使用的是 react-router-dom, 2. 安装 ...
- 转 : React Native 开发之 IDE 选型和配置
转:https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112392&idx=1&sn=135e29ddde30 ...
- 从零学React Native之03页面导航
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...
- react native (1) 新建页面并跳转
新建页面 1.新建文件 import React from 'react'; import { Text } from 'react-native'; export default class tod ...
- react native tap切换页面卡顿
问题描述:做一个页面,左边是导航,每次点击一个菜单,右边立即显示出对应的视图,数据会重新过滤,使用setState 更新视图,会卡顿 解决办法: InteractionManager.runAfter ...
- React Native 中 跨页面间通信解决方案之 react-native-event-bus
https://github.com/crazycodeboy/react-native-event-bus 用法: A页面和B页面中都有相同的列表,点击B页面中的收藏按钮,A页面会跟着更新 impo ...
- React Native登录注册页面实现空白处收起键盘
其实很简单,直接使用ScrollView作为父视图即可.有木有很神奇啊,以前都还不知道呢.....
- 【React Native】某个页面禁用物理返回键
1.引入组件 import { BackHandler, } from 'react-native'; 2.添加监听 componentDidMount(): void { BackHandler.a ...
随机推荐
- Leetcode面试题17.20_连续中值
题目地址 实现一个数列的动态添加和查询中位数. 复杂点的话应该可以写个平衡树什么的,然后查询第k大,还可以删除数字. 简单点的话显然可以维护两个堆,一个大顶堆一个小顶堆,而且大顶堆最多比小顶堆多一个, ...
- mqttnet3.0用法
.net常用的mqtt类库有2个,m2mqtt和mqttnet两个类库 当然了,这两个库的教程网上一搜一大把 但mqttnet搜到的教程全是2.7及以下版本的,但3.0版语法却不再兼容,升级版本会导致 ...
- Leetcode:105. 从前序与中序遍历序列构造二叉树&106. 从中序与后序遍历序列构造二叉树
Leetcode:105. 从前序与中序遍历序列构造二叉树&106. 从中序与后序遍历序列构造二叉树 Leetcode:105. 从前序与中序遍历序列构造二叉树&106. 从中序与后序 ...
- (1) Q#学习笔记 - 第一章 QDK安装
2020/2/22,开始学习Q#. 第1章 QDK的安装 第1节 简介 QDK是Microsoft Quantum 开发工具包,可以进行量子编程,主要包含: Q# 编程语言 在 Q# 中对复杂功能进行 ...
- 全国省市,4个直辖市geoCoord数据,用于echart gl 3d地图
var geoCoordMap = { '北京': [116.4551, 40.2539], '东城区':[116.418757,39.917544], '西城区':[116.366794,39.91 ...
- centos5,6 系统启动流程
linux内核特点: 支持模块化:模块文件的名字以.ko(kernel object)结尾 支持内核运行时,动态加载和卸载模块文件. linux内核组成部分: 核心文件:/boot/vmlinuz-V ...
- VMware使用与安装
VMware安装 下载完Vmware -> 双击打开安装包 -> 选择下一步(如下图界面) 选择接受协议,点击下一步 选择经典进行安装.这个是默认安装,会把默认插件安装到相对应的路径 选择 ...
- 纪中18日c组模拟赛
T2 GMOJ2127. 电子表格 (File IO): input:excel.in output:excel.out 时间限制: 1000 ms 空间限制: 262144 KB 具体限制 ...
- 拦截器——原理(AOP、责任链模式、配置)
1.Struts2拦截器概述: (1)Struts2框架封装中封装了很多功能,这些功能其实都是封装在Struts2的拦截器里面,Struts2里面有很多拦截器,每次不是这些拦截器都执行,每次只执行默认 ...
- SpringBoot整合持久层技术--(一)JdbcTemplate
简介: JdbcTemplate是Spring提供的一套JDBC模板框架,利用AOP技术解决直接使用JDBC带来的重复代码问题.它没有MyBatis使用那么灵活,但是却比直接使用JDBC方便得多.Sp ...