React-Native中一些常用组件的用法详解(一)
2017-06-26 10:19
876 查看
前言
本文为大家介绍一下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);
最后效果：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
- 详解React Native开源时间日期选择器组件(react-native-datetime)
- ReactNative Image组件使用详解
- React-Native 组件之 Modal的使用详解
- react-native-tab-navigator组件的基本使用示例代码
- React Native自定义标题栏组件的实现方法
- react-native中ListView组件点击跳转的方法示例
- React-Native TextInput组件详解及实例代码
- 详解React native全局变量的使用(跨组件的通信)
- React Native中导航组件react-navigation跨tab路由处理详解
- React Native自定义组件与输出方法详解
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- React-Native中一些常用组件的用法详解(二)
- react-native 常用组件的用法(二)
- React-Native中一些组件的用法(二)
- React-Native中一些组件的用法(一)
- react-native 常用组件的用法(一)
- React Native常用一些组件
- React Native常用组件
- react-native播放视频组件 react-native-video的用法
- React Native常用组件样式总结
- RN开源组件react-native-video的用法
- 【React Native开发】React Native控件之WebView组件详解以及实例使用(22)
- React Native 项目常用第三方组件汇总
- React Native 项目常用第三方组件汇总
- 【React Native】刷新组件RENDER(重新渲染)的三种方式详解
- React Native－12.React Native WebView组件详解
- React Native 项目常用第三方组件汇总
- [React-Native]常用组件
- React-Native TextInput组件详解及实例代码
- React Native控件之ScrollView组件详解
- React Native常用组件Image使用