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);

最后效果：

总结

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

React-Native中一些常用组件的用法详解(一)的更多相关文章

  1. 五分钟理解keep alive用法及原理

    这篇文章主要为大家介绍了keep alive用法及原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

  2. DialogFragment运行原理及使用方法详解

    这篇文章主要介绍了DialogFragment运行原理及使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

  3. ES6的Promise用法详解

    本文详细讲解了ES6的Promise用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  4. 解决VSCode调试react-native android项目错误问题

    这篇文章主要介绍了VSCode调试react-native android项目错误解决办法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  5. React Hook用法示例详解（6个常见hook）

    这篇文章主要介绍了React Hook用法详解（6个常见hook）,本文通过实例代码给大家介绍了6个常见hook，需要的朋友可以参考下

  6. 一文详解Mybatis-plus的介绍与使用

    Mybatis-Plus 是 MyBatis 的一个增强工具，专门针对于传统MyBatis开发中sql需要手动进行映射配置繁琐缺点的一款框架技术。本文将为大家详细讲讲Mybatis-plus的介绍与使用，感兴趣的可以了解一下

  7. Java 8 中 Function 接口使用方法介绍

    这篇文章主要介绍了Java 8中 Function接口使用方法介绍，Java8中提供了一个函数式接口Function，这个接口表示对一个参数做一些操作然后返回操作之后的值

  8. python装饰器property和setter用法

    这篇文章主要介绍了python装饰器property和setter用法，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下

  9. scrollTop 用法说明

    scrollTop属性是什么?有些情况下,“元素中内容”的高度会超过“元素本身”的高度,

  10. 基于hover的用法实例(推荐)

    下面小编就为大家带来一篇基于hover的用法实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念，例如类、对象、属性、方法等面向对象的术语，并以实例讲解各种术语的使用，非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部