文档章节

react-native 基础:react-native-router-flux 的使用[意译]

你要爪子
 你要爪子
发布于 2016/12/30 17:08
字数 818
阅读 1295
收藏 1

这篇文章主要说明 react-native-router-flux 的实际使用了。资料来源:

API_CONFIGURATION; React Native Basics: Using react-native-router-flux

##安装 创建项目;并且安装上 react-native-router-flux 包

  react-native init ReactNativeRouterFluxDemo
  cd ReactNativeRouterFluxDemo
  npm install --save react-native-router-flux

然后建立个存放js的目录,我们这里就叫app,作为 iosAndroid的公用目录

mkdir app

##先来创建个简单的页面

  // app/index.js

  import React, { Component } from 'react';
  import {
  StyleSheet,
  Text,
  View
  } from 'react-native';

  const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Welcome to the Demo!
      </Text>
    </View>
  );
  }

  const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  });

  export default App;

index.android.js 或者 index.ios.js 写入如下内容:

  // index.ios.js
  // index.android.js

  import { AppRegistry } from 'react-native';
  import App from './app';

  AppRegistry.registerComponent('ReactNativeRouterFluxDemo', () => App);

好了。先跑起来看眼。

first

##页面之间的跳转

刚刚我们只是建立了一个简单的页面。我们现在需要做的是,新建两个页面,实现互相之间的跳转。 分别就建立 ScarletScreen.js 和 GrayScreen.js,下面代码就只是给出红色的了。灰色就改改 text,component name,backgroundColor 就行。

// app/ScarletScreen.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

const ScarletScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Scarlet Screen
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#bb0000',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
  },
});

export default ScarletScreen;

好了,我们建立好两个页面了。然后要实现页面的跳转,引入我们文章重点吧。react-native-router-flux.直接看我们修改的app/index.js

// app/index.js

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';//引入包

import ScarletScreen from './ScarletScreen'; //引入文件
import GrayScreen from './GrayScreen';//引入文件

const App = () => {
return (
  <Router>
    <Scene key="root">
      <Scene key="scarlet"
        component={ScarletScreen}
        title="Scarlet"
        initial
      />
      <Scene
        key="gray"
        component={GrayScreen}
        title="Gray"
      />
    </Scene>
  </Router>
);
}

export default App;

这里我们做的就是 把 react-native-router-flux 包引入,在引入两个定义好的页面。 然后下面就是 <Router>标签了。这里约定了所有的页面都要在root下。 root 下的标签就是我们实际要显示的内容了。 这里注意,key得是唯一的。相当于给这个页面一个名称。当我们需要跳转到某个页面的时候就可以直接调用Actions.key();下面我们来修改一下 app/ScarletScreen.js

// app/ScarletScreen.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import { Actions } from 'react-native-router-flux'; // New code

const ScarletScreen = () => {
  return (
    <View style={styles.container}>
      <Text
        style={styles.welcome}
        onPress={() => Actions.gray()} // New Code
      >
        Scarlet Screen
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#bb0000',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
  },
});

export default ScarletScreen;

上面代码注明了新加的内容。现在跑起来看看吧。

两个页面跳转

好了。到这里我们两个页面的跳转就完成了,这里可以参看下这篇官方文章MINI_TUTORIAL

建立 Tabs

在tab的演示中,我们建更多背景颜色的页面来方便参照。和上面两个页面的内容是一样的,仅修改颜色,名字做出区别,这里我传了份代码到 oschina git 上,可以直接拉一下。 我们为项目建立3个tab,将几个页面引入tab中实现点击tab跳转到对应的页面。

// app/index.js

// Removed for brevity

const TabIcon = ({ selected, title }) => {
  return (
    <Text style={{color: selected ? 'red' :'black'}}>{title}</Text>
  );
}

const App = () => {
  return (
    <Router>
      <Scene key="root">
        {/* Tab Container */}
        <Scene
          key="tabbar"
          tabs={true}
          tabBarStyle={{ backgroundColor: '#FFFFFF' }}
        >
          {/* Tab and it's scenes */}
          <Scene key="osu" title="OSU" icon={TabIcon}>
            <Scene
              key="scarlet"
              component={ScarletScreen}
              title="Scarlet"
            />
            <Scene
              key="gray"
              component={GrayScreen}
              title="Gray"
            />
          </Scene>
          {/* Removed for brevity */}
        </Scene>
      </Scene>
    </Router>
  );
}

tab页面跳转

© 著作权归作者所有

你要爪子
粉丝 25
博文 92
码字总数 44444
作品 0
昆明
高级程序员
私信 提问
加载中

评论(1)

相月
相月
你这个是在youtube上看的视频吧,我当初也是跟着老外的这个视频搭建的项目架构,可是后来我发现,做tabs的时候并不用每个tab下面在套一个Scene,正确的写法:
<Router>
<Scene key="root">
{/* Tab Container */}
<Scene
key="tabbar"
tabs={true}
tabBarStyle={{ backgroundColor: '#FFFFFF' }}
>
{/* Tab and it's scenes */}
<Scene key="osu" title="OSU" icon={TabIcon} component={ScarletScreen}>
<Scene key="osu" title="UM" icon={TabIcon} component={GrayScreen}>

</Scene>
</Scene>
</Router>
【译】React Native 常用的 15 个库

译者:前端小智 原文:codingislove.com/top-15-reac… 本篇 库列表不是从网上随便找的, 这些是我在我的应用中亲自使用的库。 这些库功能可能跟其它库也有,但经过大量研究并在我的程序中尝...

前端小智
04/19
0
0
React Native 常用组件包

图标包: react-native-vector-icons 2. 脚手架 react-native-ignite 3. 轮播组件 react-native-swiper 4. 滑动Tabbar react-native-scrollable-tab-view 5. 聊天组件 react-native-gifted-......

Hui-Lee
2016/08/07
345
0
React-Native学习资料分享

React Native 构建 Facebook F8 2016 App / React Native 开发指南 f8-app.liaohuqiu.net/ React-Native入门指南 github.com/vczero/reac… 30天学习React Native教程 github.com/fangwei71......

codeGoogle
2018/05/27
0
0
react-native-router-flux 使用详解(三)

在 上一章 http://cherylgood.cn/c/reactnativerouterflux_使用详解二.php 我们主要进一步介绍了react-native-router-flux的使用,接下来主要讲解 其主要配置参数和api,当前我主要是翻译官网...

元谷
2017/10/28
0
0
React-Native学习资源

React-Native学习资源 目录教程 React Native React.js ES6 系列教程 kai源APP 组件 工具 资源网站 业界讨论 教程 React Native React-Native专题系列文章不断更新ing(入门,组件,Api,kai源项...

问题达人
2016/03/29
73
0

没有更多内容

加载失败,请刷新页面

加载更多

二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
20分钟前
0
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler...

大头鬼_yc
30分钟前
0
0
centos7修改命令行或图形界面启动模式

1.systemctl get-default命令获取当前模式 2.systemctl set-default graphical.target 修改启动模式(修改为图形界面,要是修改为命令行就multi-user.target) 2.systemctl set-default multi-...

大圣39
34分钟前
0
0
vue预渲染

prerender-spa-plugin 安装prerender-spa-plugin (插件使用见npm官网)[https://www.npmjs.com/package/prerender-spa-plugin] npm install prerender-spa-plugin --save-dev 配置prerender-s......

莫西摩西
56分钟前
1
0
Command模式

https://www.cnblogs.com/devinzhang/archive/2012/01/06/2315235.html

南桥北木
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部