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 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...
随机推荐
- APIO 2014 回文串(Manacher+后缀自动机+倍增)
题意 https://www.lydsy.com/JudgeOnline/problem.php?id=3676 思路 好像还是回文自动机裸体,但是 \(\text{Manacher}\) +后缀自动 ...
- luogu准备复习(学习)题单
矩阵乘法 P1306 exbsgs P4195 网络流(割点) P1345 主席树 P3302
- js打印html指定元素,解决动态获取的图片无法打印问题
用js来调用浏览器的打印接口很容易,一两行代码就能搞定,但是有些数据是通过动态生成的,例如一些动态生成的二维码,有时候调用打印接口图片会无法显示 为了解决这个问题,建议使用下面这个库 下载:https ...
- filesystem type ntfs not configured in kernel
移动硬盘是NTFS格式的,挂载时候kernel不支持这格式 出现:filesystem type ntfs not configured in kernel 解决:通过sudo yum install ...
- Adb工具的简单使用
Adb全称为Android Debug Bridge adb就是连接android手机与PC机的桥梁,可以在pc端对手机进行全面的操作 借助adb工具,可以管理设备或者手机模拟器的状态,进行手机操作, ...
- 【Code Tools】Java微基准测试工具JMH之中级篇
一.JMH中的基本概念 1)Mode Mode 表示 JMH 进行 Benchmark 时所使用的模式.通常是测量的维度不同,或是测量的方式不同.目前 JMH 共有四种模式: 1.Throughput ...
- 关于list中移除某种数据类型的方法
众所周知,list在不泛型的情况下是可以存放各种数据类型的,代码如下: public static void main(String[] args) { List list=new ArrayList ...
- spring-boot log
最近也在研究项目
- win10搭建svn服务
1,安装服务器版svnhttps://tortoisesvn.net/downloads.html查看版本 svn --version 2,创建版本仓库提倡创建公共仓库,那么可以多次增加项目svnad ...
- 微信小程序1rpx border ios真机显示不全问题
无意间测试发现,把border的颜色的透明度颜色改成0.99就可以了.1就不行. 边框显示不全的写法: border:1rpx solid rgba(244,84,80,1); 将边框代码的透明度改成 ...