【冠亚体育手机网站】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);

最终效果:

冠亚体育手机网站 1

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

聊起底效果:

冠亚体育手机网站 2

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

末尾效果:

冠亚体育手机网站 3

图片转变来gif图只怕会遗失一些效果与利益,点击TouchableOpacity开关会变透明,点击TouchableHighlight开关的背景颜色会退换,点击TouchableWithoutFeedback开关未有其他改动

TextInput组件

TextInput是贰个同意顾客在使用中通过键盘输入文本的主导组件。本组件的品质提供了八种表征的铺排,举例自动达成、自动大小写、占位文字,甚至各类差别的键盘类型(如纯游戏键盘卡塔 尔(英语:State of Qatar)等等。

常用属性

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

末段效果:

冠亚体育手机网站 4

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

最终效果:

冠亚体育手机网站 5

总结

如上正是那篇小说的全体内容了,希望本文的开始和结果对我们的就学也许专门的学问能推动一定的援助,固然有疑点大家能够留言交换,谢谢我们对台本之家的支撑。

您只怕感兴趣的篇章:

  • 详细明白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自定义组件与出口方法安详严整

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注