native react 常用指令_React-Native中一些常用组件的用法详解(一)

前言

本文为大家介绍一下React-Native中一些常用的组件，由于对ES6的语法并没有完全掌握，这里暂时用ES5和ES6混用的语法。

View组件

View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。

View的设计初衷是和StyleSheet搭配使用，这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用。

View的常用样式设置

flex布局样式

backgroundColor：背景颜色

borderColor：边框颜色

borderWidth：边框大小

borderRadius：圆角

以手机端携程官网为示例

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

var ViewTest = React.createClass({

render () {

return (

酒店

海外酒店

特价酒店

团购

民宿•客栈

)

}

});

var styles = StyleSheet.create({

container: {

margin: 10,

marginTop: 25,

height: 75,

flexDirection: "row",

backgroundColor: "#ff607c",

borderRadius: 5

},

flex: {

flex: 1

},

white: {

color: "white",

fontWeight: "900",

textShadowColor: "#ccc",

textShadowOffset: {width: 1, height: 1}

},

center: {

justifyContent: "center",

alignItems: "center"

},

leftRightLine: {

borderLeftWidth: 1,

borderRightWidth: 1,

borderColor: "white"

},

bottomLine: {

borderBottomWidth: 1,

borderColor: "white"

}

});

AppRegistry.registerComponent('HelloReact', () => ViewTest);

最后效果：

Text组件

一个用于显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理。

常用特性

onPress：手指触摸事件

numberOfLines ：显示多少行

常用样式设置

color：字体颜色

fontSize：字体大小

fontWeight：字体加粗

textAlign：对齐方式

以手机端网易新闻为示例

创建header.js和news.js两个文件

header.js具体代码如下：

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

var Header = React.createClass({

render () {

return (

网易

新闻

有态度

)

}

});

var styles = StyleSheet.create({

container: {

marginTop: 25,

height: 44,

alignItems: "center",

justifyContent: "center",

borderBottomWidth: 1,

borderColor: "red"

},

font: {

fontSize: 25,

fontWeight: "bold"

},

red: {

color: "red"

},

white: {

color: "white",

backgroundColor: "red"

}

});

module.exports = Header;

news.js具体代码如下：

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

var News = React.createClass({

render () {

var content = this.props.content;

var newList = [];

for (var i in content) {

var text = {content[i]};

newList.push(text);

}

return (

今日要闻

{newList}

)

}

});

var styles = StyleSheet.create({

container: {

margin: 10

},

title: {

color: "red",

fontSize: 18,

fontWeight: "bold"

},

font: {

fontSize: 14,

lineHeight: 35,

fontWeight: "normal"

}

});

module.exports = News;

最后在index.ios.js文件中修改代码为：

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

var content = [

'1、新华社用"罕见"为里皮点赞:他是国足的不二选择',

'2、干部动员拆迁遭袭身亡 是否同意拆除双方说法不',

'3、母亲欠债遭11人凌辱 儿子目睹后刺死1人被判无期',

'4、美媒:美轰炸机进入中国东海防空识别区遭中方警告'

];

var Header = require("./header");

var News = require("./news");

var NewsNote = React.createClass({

render () {

return (

)

}

});

AppRegistry.registerComponent('WorkA', () => NewsNote);

最后效果：

Touchable类组件

该组件用于封装视图，使其可以正确响应触摸操作

常用样式设置

TouchableOpcity：透明触摸，点击时，组件会出现透明过度效果。

TouchableHighlight：高亮触摸，点击时组件会出现高亮效果。

TouchableWithoutFeedback：无反馈触摸，点击时候，组件无视觉变化。

示例

创建一个touchable.js的文件

里面代码为：

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

TouchableOpacity,

TouchableHighlight,

TouchableWithoutFeedback

} from 'react-native';

var Touchable = React.createClass({

getInitialState () {

return {times: 0}

},

handlePress () {

var sum = this.state.times;

sum++;

this.setState({times: sum});

},

render () {

return (

TouchableOpacity

TouchableHighlight

TouchableWithoutFeedback

点了{this.state.times}次

)

}

});

var styles = StyleSheet.create({

btn: {

marginTop: 25,

marginLeft: 20,

width: 150,

height: 30,

backgroundColor: "cyan",

borderRadius: 3,

justifyContent: "center",

alignItems: "center"

},

text: {

fontSize: 14,

fontWeight: "bold",

color: "blue"

},

text2: {

marginLeft: 25,

marginTop: 25,

fontSize: 16

}

});

module.exports = Touchable;

在index.ios.js文件中代码更改为：

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

var Touchable = require("./touchable");

var TouchableTest = React.createClass({

render () {

return (

)

}

});

AppRegistry.registerComponent('useComponent', () => TouchableTest);

最后效果：

图片转换成gif图可能会失去一些效果，点击TouchableOpacity按钮会变透明，点击TouchableHighlight按钮的背景颜色会改变，点击TouchableWithoutFeedback按钮没有任何变化

TextInput组件

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型(如纯数字键盘)等等。

常用属性

placeholder占位符；

value 输入框的值；

password 是否密文输入；

editable 输入框是否可编辑

returnkeyType 键盘return键类型；

onChange 当文本变化时候调用；

onEndEditing 当结束编辑时调用；

onSubmitEding 当结束编辑提交按钮时候调动；

onChangeText:读取TextInput的用户输入；

示例

创建一个input.js的文件

里面代码为：

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

TextInput

} from 'react-native';

var Input = React.createClass({

getInitialState () {

return {text: ""}

},

changeText (text) {

this.setState({text: text});

},

render () {

return (

{this.state.text}

)

}

});

var styles = StyleSheet.create({

container: {

marginTop: 25

},

input: {

margin: 25,

height: 35,

borderWidth: 1,

borderColor: "red"

},

text: {

marginLeft: 35,

marginTop: 10,

fontSize: 16

}

});

module.exports = Input;

在index.ios.js文件中代码更改为：

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

var Input = require("./input");

var InputTest = React.createClass({

render () {

return (

)

}

});

AppRegistry.registerComponent('useComponent', () => InputTest);

最后效果：

Image组件

一个用于显示多种不同类型图片的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片(如相册)等。

静态图片加载

直接引入，代码如下：

网络图片加载

注意：网络图片请求http请求的xcode需要做一个设置info.plist里的Allow Arbitrary Loads后面的no改成yes。

通过source指定图片地址，代码如下：

示例

创建一个image.js的文件，在保存一张图片至本地，这里为1.png

里面代码为：

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

Image

} from 'react-native';

var ImageTest = React.createClass({

render () {

return (

)

}

});

var styles = StyleSheet.create({

container: {

margin: 10,

marginTop: 25,

alignItems: "center"

},

common: {

width: 280,

height: 250,

backgroundColor: "cyan",

justifyContent: "center",

alignItems: "center",

marginBottom: 10

},

netImg: {

width: 280,

height: 220

},

localImg: {

width: 200,

height: 200

}

});

module.exports = ImageTest;

在index.ios.js文件中代码更改为：

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

var ImageComponent = require("./image");

var ImageTest = React.createClass({

render () {

return (

)

}

});

AppRegistry.registerComponent('useComponent', () => ImageTest);

最后效果：

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。