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 (
 <view style={styles.container}>
 <view style={[styles.flex, styles.center]}>
  <text style={styles.white}>酒店</text>
 </view>
 <view style={styles.flex}>
  <view style={[styles.flex, styles.leftrightline, styles.bottomline, styles.center]}>
  <text style={styles.white}>海外酒店</text>
  </view>
  <view style={[styles.flex, styles.leftrightline, styles.center]}>
  <text style={styles.white}>特价酒店</text>
  </view>
 </view>
 <view style={styles.flex}>
  <view style={[styles.flex, styles.bottomline, styles.center]}>
  <text style={styles.white}>团购</text>
  </view>
  <view style={[styles.flex, styles.center]}>
  <text style={styles.white}>民宿•客栈</text>
  </view>
 </view>
 </view>
 )
 }
});
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 (
 <view style={styles.container}>
 <text style={styles.font}>
  <text style={styles.red}>网易</text>
  <text style={styles.white}>新闻</text>
  <text>有态度</text>
 </text>
 </view>
 )
 }
});
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 = <text key={i} style={styles.font}>{content[i]}</text>;
 newlist.push(text);
 }
 return (
 <view style={styles.container}>
 <text style={styles.title}>今日要闻</text>
 <view style={styles.container}>
  {newlist}
 </view>
 </view>
 )
 }
});
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 (
 <view>
 <header></header>
 <news content={content}></news>
 </view>
 )
 }
});
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 (
 <view>
 <touchableopacity style={styles.btn} onpress={this.handlepress}>
  <text style={styles.text}>touchableopacity</text>
 </touchableopacity>
 <touchablehighlight underlaycolor={"red"} onpress={this.handlepress} style={styles.btn}>
  <text style={styles.text}>touchablehighlight</text>
 </touchablehighlight>
 <touchablewithoutfeedback onpress={this.handlepress}>
  <view style={[styles.btn, {width: 210}]}>
  <text style={styles.text}>touchablewithoutfeedback</text>
  </view>
 </touchablewithoutfeedback>
 <text style={styles.text2}>点了{this.state.times}次</text>
 </view>
 )
 }
});
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 (
 <view>
 <touchable></touchable>
 </view>
 )
 }
});
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 (
  <view style={styles.container}>
  <textinput returnkeytype={"done"} style={styles.input} placeholder={"请输入"} onchangetext={this.changetext}/>
  <text style={styles.text}>{this.state.text}</text>
  </view>
 )
 }
});
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 (
  <view>
  <input/>
  </view>
 )
 }
});
appregistry.registercomponent('usecomponent', () => inputtest);

最后效果：

image组件

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

静态图片加载

直接引入，代码如下： <image source={require(‘./my-icon.png')} />

网络图片加载

注意：网络图片请求http请求的xcode需要做一个设置info.plist里的allow arbitrary loads后面的no改成yes。
通过source指定图片地址，代码如下： <image source=(注意这里要双花括号，因为特殊原因只能显示单花括号){uri: ‘https://facebook.github.io/react/img/logo_og.png'}(注意这里要双花括号，因为特殊原因只能显示单花括号)/>

示例

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

里面代码为：

import react, { component } from 'react';
import {
 appregistry,
 stylesheet,
 text,
 view,
 image
} from 'react-native';
var imagetest = react.createclass({
 render () {
 return (
  <view style={styles.container}>
  <view style={styles.common}>
   <image source={{uri:"http://i1.sanwen8.cn/doc/1609/852-160912105q2i6.jpg"}} style={styles.netimg}></image>
  </view>
  <view style={styles.common}>
   <image source={require("./1.png")} style={styles.localimg}></image>
  </view>
  </view>
 )
 }
});
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 (
  <view>
  <imagecomponent/>
  </view>
 )
 }
});
appregistry.registercomponent('usecomponent', () => imagetest);

最后效果：

总结

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