特别申明:本人代码不作为任何商业的用途,只是个人学习的一些心得,为了使得后来的更多的程序员少走一些弯路。*(如若侵犯你的版权还望见谅)*。

开发工具:WebStorm,xcode

1. rn的创建的时候一般用这个创建,因为最新的被墙了:

react-native init MyApp --version 0.44.3

2. 引入库的类的代码实例:

import { Navigation } from 'react-native';

3. 引入自己新建的类

var List = require(‘./list');

4. NavigatorIOS使用的时候必须指定路径不然会报错。

5. 如果不是默认的加载的第一个启动页面,一般创建一个类的话用如下方法:

var List = React.createClass({

render(){

return(

<View style={styles.container}>

</View>

);

},

});

下面是就前面几个知识点我写得code:

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

import { NavigatorIOS } from 'react-native';

var List = require('./list');

export default class navBarTest extends Component {

render() {

return (

<NavigatorIOS

style={styles.container}

initialRoute={{

component:List,

title:'游轮',

passProps:{},

}}

/>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

},

});

AppRegistry.registerComponent('navBarTest', () => navBarTest);

以上是创建一个 NavigatorIOS ,然后默认list是主页面。跳转到另外一个详情界面的时候只需要定义一个动作,然后加实现这个函数就可以了。下面是实例代码:

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
} from 'react-native'; var Detail = require('./detail');
var List = React.createClass({
render(){
return(
<ScrollView style={styles.container}>
<Text style={styles.list_item} onPress={this.goTo}> * 豪华游龙周家嗖嗖嗖嗖嗖嗖嗖嗖嗖 </Text>
<Text style={styles.list_item} onPress={this.goTo}> * 豪华游龙周家嗖嗖嗖嗖嗖嗖嗖嗖嗖 </Text>
<Text style={styles.list_item} onPress={this.goTo}> * 豪华游龙周家嗖嗖嗖嗖嗖嗖嗖嗖嗖 </Text>
</ScrollView>
);
}, goTo:function () {
this.props.navigator.push({
component:Detail,
title:'游轮详情',
rightButtonTitle:'购物车',
onRightButtonPress:function () {
alert('进入购物车');
}
});
}
}); const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
list_item: {
height:30,
color:'#FF0067',
fontSize:16,
fontWeight:'bold',
}
}); module.exports = List; 特别的说明下,当新建一个类,想输出这个类的时候的方法就是上面的最后一句代码。及(module.exports = List;) 上面是一个简单的跳转,利用空间 NavigatorIOS 实现的,当我在使用这个东西的时候的疑惑就总结为下面几个点:
1.该怎么引入 NavigatorIOS 这个空间,上面有代码,及(import { NavigatorIOS } from 'react-native';)
2.跳转的时候我怎么给它设置根控制器。上面的List。
3.跳转方法怎么实现,onPress实现的方法。

react native进一步学习(NavigatorIOS 学习)的更多相关文章

  1. React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  2. Hybrid App 和 React Native 开发那点事

    简介:Hybrid App(混合模式移动应用)开发是指介于Web-app.Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开 ...

  3. React Native 从入门到原理

    React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...

  4. 关于React Native 火热的话题,从入门到原理

    本文授权转载,作者:bestswifter(简书) React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原 ...

  5. 移动端跨平台方案对比:React Native、weex、Flutter

    跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架百花齐放,颇有一股推倒原生开发者的势头. 为什么我们需 ...

  6. 最火移动端跨平台方案盘点:React Native、weex、Flutter

    1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...

  7. 一次掌握 React 与 React Native 两个框架

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我 ...

  8. React Native 从入门到原理一

    React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却 ...

  9. React Native 入门到原理(详解)

    抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...

随机推荐

  1. APIO 2014 回文串(Manacher+后缀自动机+倍增)

    题意 https://www.lydsy.com/JudgeOnline/problem.php?id=3676 思路 好像还是回文自动机裸体,但是 \(\text{Manacher}\) +后缀自动 ...

  2. luogu准备复习(学习)题单

    矩阵乘法 P1306 exbsgs P4195 网络流(割点) P1345 主席树 P3302

  3. js打印html指定元素,解决动态获取的图片无法打印问题

    用js来调用浏览器的打印接口很容易,一两行代码就能搞定,但是有些数据是通过动态生成的,例如一些动态生成的二维码,有时候调用打印接口图片会无法显示 为了解决这个问题,建议使用下面这个库 下载:https ...

  4. filesystem type ntfs not configured in kernel

    移动硬盘是NTFS格式的,挂载时候kernel不支持这格式 出现:filesystem type ntfs not configured in kernel 解决:通过sudo yum install ...

  5. Adb工具的简单使用

    Adb全称为Android Debug Bridge adb就是连接android手机与PC机的桥梁,可以在pc端对手机进行全面的操作 借助adb工具,可以管理设备或者手机模拟器的状态,进行手机操作, ...

  6. 【Code Tools】Java微基准测试工具JMH之中级篇

    一.JMH中的基本概念 1)Mode Mode 表示 JMH 进行 Benchmark 时所使用的模式.通常是测量的维度不同,或是测量的方式不同.目前 JMH 共有四种模式: 1.Throughput ...

  7. 关于list中移除某种数据类型的方法

    众所周知,list在不泛型的情况下是可以存放各种数据类型的,代码如下: public static void main(String[] args) { List list=new ArrayList ...

  8. spring-boot log

    最近也在研究项目

  9. win10搭建svn服务

    1,安装服务器版svnhttps://tortoisesvn.net/downloads.html查看版本 svn --version 2,创建版本仓库提倡创建公共仓库,那么可以多次增加项目svnad ...

  10. 微信小程序1rpx border ios真机显示不全问题

    无意间测试发现,把border的颜色的透明度颜色改成0.99就可以了.1就不行. 边框显示不全的写法: border:1rpx solid rgba(244,84,80,1); 将边框代码的透明度改成 ...