react native进一步学习(NavigatorIOS 学习)
特别申明:本人代码不作为任何商业的用途,只是个人学习的一些心得,为了使得后来的更多的程序员少走一些弯路。*(如若侵犯你的版权还望见谅)*。
开发工具: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 学习)的更多相关文章
- React Native 简介:用 JavaScript 搭建 iOS 应用 (1)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- Hybrid App 和 React Native 开发那点事
简介:Hybrid App(混合模式移动应用)开发是指介于Web-app.Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开 ...
- React Native 从入门到原理
React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...
- 关于React Native 火热的话题,从入门到原理
本文授权转载,作者:bestswifter(简书) React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原 ...
- 移动端跨平台方案对比:React Native、weex、Flutter
跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架百花齐放,颇有一股推倒原生开发者的势头. 为什么我们需 ...
- 最火移动端跨平台方案盘点:React Native、weex、Flutter
1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...
- 一次掌握 React 与 React Native 两个框架
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我 ...
- React Native 从入门到原理一
React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却 ...
- React Native 入门到原理(详解)
抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...
随机推荐
- ZOJ 2477 Magic Cube(魔方)
ZOJ 2477 Magic Cube(魔方) Time Limit: 2 Seconds Memory Limit: 65536 KB This is a very popular gam ...
- DRF认证组件流程分析
视图函数中加上认证功能,流程见下图 import hashlib import time def get_random(name): md = hashlib.md5() md.update(byte ...
- Linux下安装docker
//安装docker //需要输入时 输y就可以yum install -y epel-releaseyum install docker-io # 加入开机启动chkconfig docker on ...
- 2019.4.24(js)
1. 取得正数和负数的绝对值 Math.abs(7.25) Math.abs(-7.25) 2.利用JS刷新页面方法 https://www.cnblogs.com/Chen-XiaoJun/p/62 ...
- font-spider-plus,字体压缩插件使用笔记
font-spider-plus使用笔记, fsp是一个腾讯的大佬改版后的font-soider 主要思路是 采集线上网页使用到的字体,从字体文件中分离出来,完成大幅度压缩, 1,npm i font ...
- 如何在Rails6内通过Webpacker使用JavaScript; flatpicker日期时间组件选择器
如何在Rails6内通过Webpacker使用JavaScript; Rails6默认不再使用asset pipeline,改用Webpacker. 文件结构变化: 配置文件: webpacker.y ...
- 站在Web3.0 理解IPFS是什么
尽管网络上,已经有不少文章讨论IPFS,不过真正讲明白IPFS想做什么的很少,文本尝试站在未来Web3.0的高度来看看IPFS究竟用来解决什么问题. DApp 的缺陷 对区块链有所了解的同学,知道区块 ...
- 洛谷P1439 【模板】最长公共子序列
题目描述 给出1-n的两个排列P1和P2,求它们的最长公共子序列. 输入输出格式 输入格式: 第一行是一个数n, 接下来两行,每行为n个数,为自然数1-n的一个排列. 输出格式: 一个数,即最长公共子 ...
- Git 忽略特定文件或文件夹
在代码编译过程中,可能会生成一些目标文件或其他我们不希望提交到服务器的文件或文件夹, 但是因为是生成出来的文件/文件夹,在每次使用git status 查看状态的时候git系统总会提示这些 文件或文件 ...
- hdu6396(思维+输入挂)
Swordsman Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accept ...