ReactNavtive框架教程(2)

原文:http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript

注意:所有图片放在了百度相册空间,如果你看不到图片,请复制图片URL,然后粘贴到地址栏中进行查看。

Hello World JSX

前面我们用React.createElement构建了一个简单的UI ,React 会将之转换为对应的本地对象。但对于复杂UI来说(比如那些组件嵌套的UI),代码会变得非常难看。

确保App保持运行,回到文本编辑器,修改index.ios.js中的return语句为:


return <React.Text style={styles.text}>Hello World (Again)</React.Text>;

这里使用了JSX语法,即JavaScript 语法扩展,它基本上是将JavaScript代码混合了HTML风格。如果你是一个web开发人员,对此你应该不会陌生。 保存 index.ios.js回到iPhone模拟器,按下快捷键 Cmd+R,你会看到App的显示变成了 “HelloWorld (Again)”。

重新运行React Navtive App如同刷新Web页面一样简单。

注意: 如果你还有疑问,你可以用浏览器在看一下你的“Bundle”内容,它应该也发生了变化。

使用导航

在 index.ios.js, 将 PropertyFinderApp 类修改为 HelloWorld:


class HelloWorld extends React.Component {

我们仍然要显示“Hello World”字样,但不再将它作为App的根视图。

然后加入以下代码:


class PropertyFinderApp extends React.Component {

render() {

return (

<React.NavigatorIOS

style={styles.container}

initialRoute={{

title: ‘Property Finder‘,

component: HelloWorld,

}}/>

);

}

}

这将创建一个导航控制器,并指定了它的外观样式和初始route(相对于HelloWorld视图)。在web开发中,routing是一种技术,用于表示应用程序的导航方式,即哪个一页面(或route)对应哪一个URL。

然后修改css样式定义,在其中增加一个container样式:


var styles = React.StyleSheet.create({

text: {

color: ‘black‘,

backgroundColor: ‘white‘,

fontSize: 30,

margin: 80

},

container: {

flex: 1

}

});

flex: 1的意思稍后解释。

回到模拟器,按 Cmd+R 查看效果:

现在“Hello World” 文本作为Navigation Controller的根视图显示。

创建搜索页面

新建一个 SearchPage.js 文件,保存在 index.ios.js同一目录。在这个文件中加入代码:


‘use strict‘;

var React = require(‘react-native‘);

var {

StyleSheet,

Text,

TextInput,

View,

TouchableHighlight,

ActivityIndicatorIOS,

Image,

Component

} = React;

这里使用了一个解构赋值(destructuringassignment),可以将多个对象属性一次性赋给多个变量。这样,在后面的代码中,我们就可以省略掉React前缀,比如用StyleSheet 来代替 React.StyleSheet。解构赋值对于数组操作来说尤其方便,请参考wellworth learning more about.

然后定义如下Css样式:


var styles = StyleSheet.create({

description: {

marginBottom: 20,

fontSize: 18,

textAlign: ‘center‘,

color: ‘#656565‘

},

container: {

padding: 30,

marginTop: 65,

alignItems: ‘center‘

}

});

标准的 CSS 属性。虽然用CSS比在IB设置UI样式的可视化要差,但总比在viewDidLoad()方法中用代码写要好一些。

然后加入以下代码:


class SearchPage extends Component {

render() {

return (

<View style={styles.container}>

<Text style={styles.description}>

Search for houses to buy!

</Text>

<Text style={styles.description}>

Search by place-name, postcode or search near your location.

</Text>

</View>

);

}

}

一个container视图,包含两个label。

最后是这一句:


module.exports = SearchPage;

这一句将使 SearchPage 类可被其他js文件引用。

然后需要修改App的导航。

打开 index.ios.js 在文件头部加入 require 语句:


var SearchPage = require(‘./SearchPage‘);

在 PropertyFinderApp 类的  render 函数中,修改 initialRoute 为:


component: SearchPage

这里我们可以将HelloWorld类和它对应的样式移除了,我们不在需要它。

回到模拟器,按下 Cmd+R 查看效果:

弹性盒子模型

我们可以用基本的CSS属性处理边距、间距、色彩等问题。但是有时候使用CSS新增加弹性盒子模型会非常有用。

ReactNative 使用了 css-layout 库,在这个库中实现了弹性盒子,而这种模型无论对iOS还是Android来说都很好理解。

在这个App中,采用了默认的垂直流式布局,即容器中的子元素按照从上到下的顺序进行布局。比如:

这被称作主轴, 主轴可能是水平方向,也可能是垂直方向。每个子元素的纵向位置由它们的边距(margin)、间距(padding)和高决定。容器的alignItems属性会被设置为居中(center),这决定了子元素在交叉轴上的位置。在本例里,将导致子元素水平居中对齐。

接下来我们添加一些文本输入框和按钮。打开SearchPage.js 在第二个 Text 元素后添加:


<View style={styles.flowRight}>

<TextInput

style={styles.searchInput}

placeholder=‘Search via name or postcode‘/>

<TouchableHighlight style={styles.button}

underlayColor=‘#99d9f4‘>

<Text style={styles.buttonText}>Go</Text>

</TouchableHighlight>

</View>

<TouchableHighlight style={styles.button}

underlayColor=‘#99d9f4‘>

<Text style={styles.buttonText}>Location</Text>

</TouchableHighlight>

这段代码添加了两个顶级的视图:一个文本输入框外加一个按钮,以及一个单独的按钮。它们所使用的样式呆会我们再介绍。

时间: 2024-10-22 02:49:08

ReactNavtive框架教程(2)的相关文章

ReactNavtive框架教程(1)

原文:http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript 注意:所有图片放在了百度相册空间,如果你看不到图片,请复制图片URL,然后粘贴到地址栏中进行查看. 开始 ReactNative 框架可以在GitHub 获得,你可以使用git clone命令或者直接下载zip包来获取它. ReactNative 使用了 Node.js,如果你的机器上没有安装Node.js,请先安装它.

ReactNavtive框架教程(6)(完)

原文:http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript 注意:所有图片放在了百度相册空间,如果你看不到图片,请复制图片URL,然后粘贴到地址栏中进行查看. 根据位置查找 在Xcode中打开 Info.plist ,右键,Add Row,增加一个key. 使用NSLocationWhenInUseUsageDescription 作为键名,使用 PropertyFinder wo

ReactNavtive框架教程(3)

原文:http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript 注意:所有图片放在了百度相册空间,如果你看不到图片,请复制图片URL,然后粘贴到地址栏中进行查看. 接着,在styles中增加如下样式: flowRight: { flexDirection: 'row', alignItems: 'center', alignSelf: 'stretch' }, buttonText:

ReactNavtive框架教程(4)

原文:http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript 注意:所有图片放在了百度相册空间,如果你看不到图片,请复制图片URL,然后粘贴到地址栏中进行查看. 开始搜索 为了实现搜索概念,我们需要处理Go按钮点击事件,创建对应的API请求,显示网络请求的状态. 打开SearchPage.js, 在constructor方法中修改state的初始化代码: this.state = {

Java - Struts框架教程 Hibernate框架教程 Spring框架入门教程(新版) sping mvc spring boot spring cloud Mybatis

https://www.zhihu.com/question/21142149 http://how2j.cn/k/hibernate/hibernate-tutorial/31.html?tid=63 https://www.zhihu.com/question/29444491/answer/146457757 1. Java - Struts框架教程Struts 是Apache软件基金会(ASF)赞助的一个开源项目.通过采用JavaServlet/JSP技术,实现了基于Java EEWeb

Quartz 框架 教程(中文版)2.2.x

Quartz 框架 教程(中文版)2.2.x 之第一课 开始使用Quartz框架 Quartz 框架 教程(中文版)2.2.x 之第二课 Quartz API,Jobs和Triggers简介 Quartz 框架 教程(中文版)2.2.x 之第三课 更多关于Jobs和JobDetails Quartz 框架 教程(中文版)2.2.x 之第四课 更多关于Triggers Quartz 框架 教程(中文版)2.2.x 之第五课 SimpleTrigger Quartz 框架 教程(中文版)2.2.x

tinyshop框架教程已在腾讯课堂开课

php就业网简介:www.php91.net,专注于Thinkphp框架教程的php框架学习中心.同时也有小崔老师自学php的教程,与你一起成长哦 同时,php就业网教程部分:http://www.php91.net/,后期为php爱好者,提供从php基础入门到精通的教程,包括现代化的php工程师要学习的框架:symfony框架教程,php史上最难的框架.小崔老师会为你讲解php设计模式.Symfony框架,让你在php学习的路上搬开一个大大的垫脚石! 具体可以访问:   https://ke.

python Django Wbe框架教程

python  Django Wbe框架教程 一.简介 Django 中提供了开发网站经常用到的模块,常见的代码都为你写好了,通过减少重复的代码,Django 使你能够专注于 web 应用上有 趣的关键性的东西.为了达到这个目标,Django 提供了通用Web开发模式的高度抽象,提供了频繁进行的编程作业的快速解决方法,以及为“如何解决问题”提供了清晰明了的约定.Django的理念是DRY(Don't Repeat Yourself)来鼓励快速开发! 让我们一览 Django 全貌 urls.py

java资料免费分享 Struts2框架教程

用sitemesh框架解决项目统一布局的解决方案http://edu.ibeifeng.com/view-index-id-80.html 实现java程序调用oracle的存储过程解决方案http://edu.ibeifeng.com/view-index-id-78.html 命令模式在java web中的应用解决方案http://edu.ibeifeng.com/view-index-id-77.html web项目中中文乱码解决方案http://edu.ibeifeng.com/view