reactNative 基础
一 、 基本程序:
import React, { Component } from 'react';
import { Text } from 'react-native'; export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
基本程序解释:
了解ES2015,上面的示例代码中的
import
、from
、class
、extends
、以及() =>
箭头函数等新语法都是ES2015中的特性。如果你不熟悉ES2015的话,可以看看阮一峰老师的书,还有论坛的这篇总结。<Text>Hello world!</Text> -- 这叫做JSX —— 是一种在JavaScript中嵌入XML结构的语法。以上看起起像HTML,实际使用的是ReactNative的<TEXT>组件。更多组件;
上面的代码定义了一个名为
HelloWorldApp
的新的组件( Component )
。你在编写React Native应用时,肯定会写出很多新的组件。而一个App的最终界面,其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render
方法中返回一些用于渲染结构的JSX语句。
二、关键概念
1.属性
以常见的基础组件
Image
为例,在创建一个图片时,可以传入一个名为source
的prop来指定要显示的图片的地址,以及使用名为style
的prop来控制其尺寸。//普通属性
import React, { Component } from 'react';
import { Image } from 'react-native'; export default class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
//普通属性设置
<Image source={pic} style={{width: 193, height: 110}} />
);
}
} //自定义属性
import React, { Component } from 'react';
import { Text, View } from 'react-native'; class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
} export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
//上面的例子出现了一样新的名为View的组件。View 常用作其他组件的容器,来帮助控制布局和样式。2,状态
我们使用两种数据来控制一个组件:
props
和state
。props
是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用state
。假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了,所以文字内容应该是一个
prop
。而文字的显示或隐藏的状态(快速的显隐切换就产生了闪烁的效果)则是随着时间变化的,因此这一状态应该写到state
中。import React, { Component } from 'react';
import { Text, View } from 'react-native'; class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true }; // 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
} render() {
// 根据当前showText的值决定是否显示text内容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
} export default class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}3,样式
实际开发中组件的样式会越来越复杂,我们建议使用
StyleSheet.create
来集中定义组件的样式。比如像下面这样:import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
} const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
}); AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);后声明的属性会覆盖先声明的同名属性
4.高度与宽度
1.指定宽高:
最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。React Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native'; class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>
);
}
};
// 注册应用(registerComponent)后才能正确渲染
// 注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);2.弹性(Flex)宽高:
一般而言我们会使用
flex:1
来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1
,则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex
值不一样,则谁的值更大,谁占据剩余空间的比例就更大(即占据剩余空间的比等于并列组件间flex
值的比)。组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的
width
和height
,也没有设定flex
,则父容器的尺寸为零。其子组件如果使用了flex
,也是无法显示的。import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native'; class FlexDimensionsBasics extends Component {
render() {
return (
// 试试去掉父View中的`flex: 1`。
// 则父View不再具有尺寸,因此子组件也无法再撑开。
// 然后再用`height: 300`来代替父View的`flex: 1`试试看?
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} />
<View style={{flex: 2, backgroundColor: 'skyblue'}} />
<View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>
);
}
}; AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
三、使用Flexbox布局
我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。
一般来说,使用 flexDirection
、alignItems
和 justifyContent
三个样式属性就已经能满足大多数布局需求。译注:这里有一份简易布局图解,可以给你一个大概的印象。
React Native中的Flexbox的工作原理和web上的CSS基本一致,当然也存在少许差异。首先是默认值不同:flexDirection
的默认值是 column
而不是 row
,而flex
也只能指定一个数字值。Flexbox布局.
四、处理文本输入
TextInput
是一个允许用户输入文本的基础组件。它有一个名为onChangeText
的属性,此属性接受一个函数,而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing
的属性,会在文本被提交后(用户按下软键盘上的提交键)调用。
假如我们要实现当用户输入时,实时将其以单词为单位翻译为另一种文字。我们假设这另一种文字来自某个吃货星球,只有一个单词:
reactNative 基础的更多相关文章
- React-Native基础教程
React-Native牛刀小试仿京东砍啊砍砍到你手软 React-Native基础教程 *React-Native基础篇作者git *React-Native官方文档 *Demo 几个月前faceb ...
- 1. ReactNative 基础
/** 1. reactNative 反应式语言 2. 既拥有原生的用户体验,又保留React的开发效率 3. FaceBook研究 H5,Android,iOS 4. BAT的插件化,热修改 2 ...
- ReactNative 基础学习
安卓Back键的处理·基本+高级篇 http://bbs.reactnative.cn/topic/480/%E5%AE%89%E5%8D%93back%E9%94%AE%E7%9A%84%E5%A4 ...
- react-native 基础知识的学习
react已经用了半年多了,年后有时间想探究一下奇妙的react-native,还别说确实刁,具体哪里刁后面会补充,因为搭建教程,以及入门教程没来得及写,这里先来写一些基础知识的心得. 为什么reac ...
- React-Native基础-安卓篇(二)
前言:这一篇随笔将记录我在React-Native官网文档上学习的基础知识
- react-native基础教程(1)
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-foundation-course/ React ...
- React-Native基础_5.列表视图ListView 网络数据展示
//获取网络数据 并用列表展示 豆瓣Top250 api /** * Sample React Native App * https://github.com/facebook/react-nativ ...
- React-Native基础_5.列表视图ListView
列表视图ListView 用来显示垂直滚动列表,需要指定两个东西,1 数据的来源 dataSource,2 渲染列表的条目布局 rendRow 'use strict' import React, { ...
- React-Native基础_4.View组件
View组件 对应ios 的UIView android 中的view 使用要先导入View import { View } from 'react-native'; 使用就是View标签,可以添加S ...
随机推荐
- Python—函数的名称空间
名称空间 又名name space, 顾名思义就是存放名字的地方,存什么名字呢?举例说明,若变量x=1,1存放于内存中,那名字x存放在哪里呢?名称空间正是存放名字x与1绑定关系的地方 名称空间共3种, ...
- Shell脚本1
1Shell编程 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言. Shell脚本 Shell 脚本(shell scr ...
- Linux之hosts文件
一.序言: 今天同事部署环境遇到问题, 原因1:修改了主机名,在/etc/hosts文件中加了3台集群的ip和主机名,但是将默认的前两行也改了,没注意看改了哪里, 现象: 1.zookeeper单台可 ...
- 多线程系列之九:Worker Thread模式
一,Worker Thread模式 也叫ThreadPool(线程池模式) 二,示例程序 情景:一个工作车间有多个工人处理请求,客户可以向车间添加请求.请求类:Request定义了请求的信息和处理该请 ...
- MySQL数据库导入错误:ERROR 1064 (42000) 和 ERROR at line xx:
https://www.cnblogs.com/yeahgis/p/4358973.html mysql -hlocalhost -uroot -proot --default-character-s ...
- Python解释器有哪些?Python解释器种类
Python是一门解释器语言,代码想运行,必须通过解释器执行,Python存在多种解释器,分别基于不同语言开发,每个解释器有不同的特点,但都能正常运行Python代码,以下是常用的五种Python解释 ...
- C#复习笔记(3)--C#2:解决C#1的问题(结束C#2的内容:最后一些特性)
结束C#2的内容:最后一些新性 这是本章要讲的内容: 分部类型:可以在多个源文件中为 一个类型编写代码. 特别适用于部分代码是自动生成, 而其他部分的代码为手写的类型. 静态类:对工具类进行整理, 以 ...
- SpringMVC+Spring+Mybatis+AngularJS 多规格保存示例代码
insert时拿到最新增加的id值 绑定参数 js 实体类 Service实现类 Controller
- 第四周作业&&结对编程
1. 结对编程. 本周开始,和我结对编程的小伙伴是齐嘉亮(博客:http://www.cnblogs.com/zhengrui0452/). 因为这周需要发布四人团队项目的alpha版本,刚好我和亮哥 ...
- 关于idea easyui 引入css js
1.引用官方网站 <link rel="stylesheet" type="text/css" href="http://www.w3cscho ...