ReactNative学习笔记(二)基础进阶
一个最简单的HelloWorld页面
先不多解释,直接上代码:
import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
export default class helloworldComponent extends Component
{
render()
{
return (
<View style={styles.container}>
<Text style={styles.welcome}>Hello World!</Text>
</View>
);
}
}
const styles = StyleSheet.create(
{
container:
{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome:
{
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
// 这句话就相当于Java里面的main函数,不用特别深入了解,知道即可
// 第一个参数的'helloworld'必须跟你的项目名一样
AppRegistry.registerComponent('helloworld', () => helloworldComponent);
官方推荐使用ES6语法,不熟悉ES6的同学可能看起来感觉这完全不是JS代码,可以先看看这篇文章熟悉一下区别:
react-react-native-的es5-es6写法对照表
对于Android平台而言,index.android.js
就是整个项目的入口,AppRegistry.registerComponent
则是入口中的main函数。我一般习惯index.android.js
中只简单的写两三行代码,其它的以组件的形式加载进来:
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import MainPage from './views/MainPage';
// 注意,这里用引号括起来的'helloworld'必须和你init创建的项目名一致
AppRegistry.registerComponent('helloworld', () => MainPage);
JSX语法
有React.js
基础的话可能会很熟悉这个,我在学习ReactNative
的时候没有接触过React.js
,所以有些吃亏。
JSX
可以看做是内嵌在JS中的一段xml代码,不需要引号包裹,放在这个里面:render(){ return (JSX);}
,{}
表示里面是一个变量或者表达式,和jsp的${}
类似。
注意每个render里面返回的XML根节点只能是一个,像下面这样的写法是错误的:
render()
{
return (
<Text>Hello World!</Text>
<Text>Hello World!</Text>
);
}
只能另外用一个组件把它包裹,比如<View>
:
render()
{
return (
<View>
<Text>Hello World!</Text>
<Text>Hello World!</Text>
</View>
);
}
动态拼接JSX
因为JSX不是普通的字符串,我们没法像拼接字符串一样拼接它,但还是有办法的。JSX里面可以随意内嵌表达式:
class TestComponent extends Component
{
constructor(props)
{
super(props);
this.list = ['张三', '李四', '王二麻子', '小茗同学'];
}
render()
{
return (
<View style={{flex:1}}>
<Text>你好啊</Text>
{this.list.map((item, idx) => <Text key={'idx_'+idx}>{item}</Text>)}
<Image source={require('./image/logo.png')}/>
</View>
);
}
}
再复杂一点的还可以层层嵌套,代码多了则可以把遍历的代码单独写到一个方法里面然后调用,比如:
class TestComponent extends Component
{
constructor(props)
{
super(props);
this.list = ['张三', '李四', '王二麻子', '小茗同学'];
}
renderList(list)
{
return list.map((item, idx) =>
{
return (<Text key={'idx_'+idx}>{item}</Text>);
});
}
render()
{
return (
<View style={{flex:1}}>
<Text>你好啊</Text>
{this.renderList(this.list)}
<Image source={require('./image/logo.png')}/>
</View>
);
}
}
样式篇
样式的写法
样式可以直接写在style上面:
<Text style={{color: 'red', fontSize: 16}} />
也可以像css一样先单独定义好再引用,不过和css还是有很大差别的:
var styles = StyleSheet.create({
btn: {
width: 38,
height: 38,
},
background: {
backgroundColor: '#222222',
},
active: {
borderWidth: 2,
borderColor: '#00ff00',
}
});
然后这样写:
<Text style={styles.btn} /> // 单个class
<Text style={[styles.btn, styles.active]} /> // 多个class
<Text style={[styles.btn, {color: 'red'}]} /> // class与style混写
注意事项:
- 样式写法采用的是JSON格式;
- 字符串属性必须加引号;
- 大小全部没有px,纯数字;
- 采用驼峰式命名,不是中划线;
直接操作某个元素
可以使用ref
给元素实现类似HTML中的id的效果,即this.refs[id]
与document.getElementById(id)
类似:
render()
{
return (
<View ref="btn" style={{width: 100, height: 100}}/>
);
}
componentDidMount()
{
// 组件显示完毕给它设置红色边框效果
this.refs['btn'].setNativeProps
({
style: {borderColor: 'red', borderWidth: 5}
});
}
当然,一般推荐使用state
来修改界面,除非你对性能特别关注才用上述方法。
已知setNativeProps
无法修改Image
的source
,这应该是个bug。
图片加载
加载本地图片
官网推荐使用require加载图片,路径就是相对于js的相对路径,这种方式可以自动设置宽高度:
<Image source={require('./images/check.png')} />
虽然这种方式有很多优点,但是带来了一个致命的缺点:就是图片路径无法动态指定,比如下面这个例子,如果有100种状态需要判断,难道要写100个if else
?
// 正确
<Image source={require('./my-icon.png')} />
// 错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />
// 正确
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />
目前还没有找到这个问题的有效解决方法。
加载app资源图片
加载已经打包到App中的图片资源(通过Xcode的asset类目或者Android的drawable文件夹打包):
假设有这样一个文件:android\app\src\main\res\drawable-hdpi\ic_launcher.png
,那么加载时可以直接这样,注意不需要.png
后缀,而且必须手动指定宽高度,否则默认是0*0
:
<Image source={{uri: 'ic_launcher'}} style={{width: 40, height: 40}} />
加载网络图片
加载网络图片和加载资源图片一样,也要手动指定宽高度:
<Image source={{uri: 'http://test.liuxianan.com/sample.jpg'}} style={{width: 40, height: 40}} />
组件的生命周期
附录:所有可用CSS列表
注意:部分属性安卓不支持,如shadow
。
RN中所有可用的CSS列表如下:
"alignItems",
"alignSelf",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomWidth",
"borderColor",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStyle",
"borderTopColor",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopWidth",
"borderWidth",
"bottom",
"color",
"flex",
"flexDirection",
"flexWrap",
"fontFamily",
"fontSize",
"fontStyle",
"fontWeight",
"height",
"justifyContent",
"left",
"letterSpacing",
"lineHeight",
"margin",
"marginBottom",
"marginHorizontal",
"marginLeft",
"marginRight",
"marginTop",
"marginVertical",
"opacity",
"overflow",
"padding",
"paddingBottom",
"paddingHorizontal",
"paddingLeft",
"paddingRight",
"paddingTop",
"paddingVertical",
"position",
"resizeMode",
"right",
"rotation",
"scaleX",
"scaleY",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"textAlign",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"tintColor",
"top",
"transform",
"transformMatrix",
"translateX",
"translateY",
"width",
"writingDirection"
参考
http://blog.csdn.net/sbsujjbcy/article/details/50017029
ReactNative学习笔记(二)基础进阶的更多相关文章
- amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules
amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...
- 线段树学习笔记(基础&进阶)(一) | P3372 【模板】线段树 1 题解
什么是线段树 线段树是一棵二叉树,每个结点存储需维护的信息,一般用于处理区间最值.区间和等问题. 线段树的用处 对编号连续的一些点进行修改或者统计操作,修改和统计的复杂度都是 O(log n). 基础 ...
- amazeui学习笔记二(进阶开发4)--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
- amazeui学习笔记二(进阶开发2)--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- amazeui学习笔记二(进阶开发1)--项目结构structure
amazeui学习笔记二(进阶开发1)--项目结构structure 一.总结 1.项目结构:是说的amazeui在github上面的项目结构,二次开发amazeui用 二.项目结构structure ...
- https学习笔记二----基础密码学知识和python pycrypto库的介绍使用
在更详细的学习HTTPS之前,我也觉得很有必要学习下HTTPS经常用到的加密编码技术的背景知识.密码学是对报文进行编解码的机制和技巧.可以用来加密数据,比如数据加密常用的AES/ECB/PKCS5Pa ...
- tensorflow学习笔记二:入门基础 好教程 可用
http://www.cnblogs.com/denny402/p/5852083.html tensorflow学习笔记二:入门基础 TensorFlow用张量这种数据结构来表示所有的数据.用一 ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
随机推荐
- SpringBoot中常用注解@Controller/@RestController/@RequestMapping的区别
@Controller 处理http请求 @Controller //@ResponseBody public class HelloController { @RequestMapping(valu ...
- python大法好——继承、多态
1.继承 类的继承 面向对象的编程带来的主要好处之一是代码的重用,实现这种重用的方法之一是通过继承机制. 通过继承创建的新类称为子类或派生类,被继承的类称为基类.父类或超类. 继承语法 class 派 ...
- Docker 安装 oracle 并使用 navicat 实现外部连接
1,拉取 docker 镜像:docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g 1.1 , 该镜像由阿里云提供,比较大, ...
- mysql 使用注意
1. consider upgrading MySQL client 描述:因mysql5版本过度到8版本后,访问要求升级mysql的客户端 原因:mysql在升级后,对加密算法部分做了调整导致. 对 ...
- Pandas分组
GroupBy技术 分组运算的过程可以用下面的流程图表示出来 import pandas as pd from pandas import Series import numpy as np df = ...
- vue踩坑(一):打包上线
找到config→index.js 然后找到index.js的buildassetsPublicPath 这个修改为你的项目放在服务器的路径 像我的项目是放在wap 文件夹下的 这些配置完成后然后 ...
- vue项目强制清除页面缓存
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...
- 用rekit创建react项目
第一步 先进入github.com 然后搜索rekit 往下滑 1 . 先全局安装 npm install -g rekit 2 . 进入自己想要创建项目文件的目录输入 rekit create / ...
- input text 只能输入数字
添加 onkeyup="value=value.replace(/[^\d]/g,'')"
- stark组件开发之排序
class StartHandler(object): .......... ordered_list = [] # 排序规则由 用户指定. def get_ordered_list(self): r ...