安装路由

  1. 运行yarn add react-native-router-flux
  2. 路由官网
  3. 路由相关配置
  4. 路由简单的DEMO
// 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---路由配置的更多相关文章

  1. React Native - 1 Windows下的环境配置(Windows+Android)

    参考:https://facebook.github.io/react-native/docs/getting-started.html(要FQ)     网站上建议使用Chocolatey去配环境, ...

  2. webpack 配置react脚手架(四):路由配置

    1. 由于 react-router 是集成了 react-router-dom 和 react-router-native的一起的,所以这里要使用的是 react-router-dom, 2. 安装 ...

  3. 转 : React Native 开发之 IDE 选型和配置

    转:https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112392&idx=1&sn=135e29ddde30 ...

  4. 从零学React Native之03页面导航

    之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...

  5. react native (1) 新建页面并跳转

    新建页面 1.新建文件 import React from 'react'; import { Text } from 'react-native'; export default class tod ...

  6. react native tap切换页面卡顿

    问题描述:做一个页面,左边是导航,每次点击一个菜单,右边立即显示出对应的视图,数据会重新过滤,使用setState 更新视图,会卡顿 解决办法: InteractionManager.runAfter ...

  7. React Native 中 跨页面间通信解决方案之 react-native-event-bus

    https://github.com/crazycodeboy/react-native-event-bus 用法: A页面和B页面中都有相同的列表,点击B页面中的收藏按钮,A页面会跟着更新 impo ...

  8. React Native登录注册页面实现空白处收起键盘

    其实很简单,直接使用ScrollView作为父视图即可.有木有很神奇啊,以前都还不知道呢.....

  9. 【React Native】某个页面禁用物理返回键

    1.引入组件 import { BackHandler, } from 'react-native'; 2.添加监听 componentDidMount(): void { BackHandler.a ...

随机推荐

  1. Leetcode面试题17.20_连续中值

    题目地址 实现一个数列的动态添加和查询中位数. 复杂点的话应该可以写个平衡树什么的,然后查询第k大,还可以删除数字. 简单点的话显然可以维护两个堆,一个大顶堆一个小顶堆,而且大顶堆最多比小顶堆多一个, ...

  2. mqttnet3.0用法

    .net常用的mqtt类库有2个,m2mqtt和mqttnet两个类库 当然了,这两个库的教程网上一搜一大把 但mqttnet搜到的教程全是2.7及以下版本的,但3.0版语法却不再兼容,升级版本会导致 ...

  3. Leetcode:105. 从前序与中序遍历序列构造二叉树&106. 从中序与后序遍历序列构造二叉树

    Leetcode:105. 从前序与中序遍历序列构造二叉树&106. 从中序与后序遍历序列构造二叉树 Leetcode:105. 从前序与中序遍历序列构造二叉树&106. 从中序与后序 ...

  4. (1) Q#学习笔记 - 第一章 QDK安装

    2020/2/22,开始学习Q#. 第1章 QDK的安装 第1节 简介 QDK是Microsoft Quantum 开发工具包,可以进行量子编程,主要包含: Q# 编程语言 在 Q# 中对复杂功能进行 ...

  5. 全国省市,4个直辖市geoCoord数据,用于echart gl 3d地图

    var geoCoordMap = { '北京': [116.4551, 40.2539], '东城区':[116.418757,39.917544], '西城区':[116.366794,39.91 ...

  6. centos5,6 系统启动流程

    linux内核特点: 支持模块化:模块文件的名字以.ko(kernel object)结尾 支持内核运行时,动态加载和卸载模块文件. linux内核组成部分: 核心文件:/boot/vmlinuz-V ...

  7. VMware使用与安装

    VMware安装 下载完Vmware -> 双击打开安装包 -> 选择下一步(如下图界面) 选择接受协议,点击下一步 选择经典进行安装.这个是默认安装,会把默认插件安装到相对应的路径 选择 ...

  8. 纪中18日c组模拟赛

    T2 GMOJ2127. 电子表格 (File IO): input:excel.in output:excel.out 时间限制: 1000 ms  空间限制: 262144 KB  具体限制   ...

  9. 拦截器——原理(AOP、责任链模式、配置)

    1.Struts2拦截器概述: (1)Struts2框架封装中封装了很多功能,这些功能其实都是封装在Struts2的拦截器里面,Struts2里面有很多拦截器,每次不是这些拦截器都执行,每次只执行默认 ...

  10. SpringBoot整合持久层技术--(一)JdbcTemplate

    简介: JdbcTemplate是Spring提供的一套JDBC模板框架,利用AOP技术解决直接使用JDBC带来的重复代码问题.它没有MyBatis使用那么灵活,但是却比直接使用JDBC方便得多.Sp ...