React-Native中一些常用組件的用法詳解(一)

前言

堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專(zhuān)業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都辦公空間設(shè)計(jì)小微創(chuàng)業(yè)公司專(zhuān)業(yè)提供成都企業(yè)網(wǎng)站建設(shè)營(yíng)銷(xiāo)網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開(kāi)發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

本文為大家介紹一下React-Native中一些常用的組件，由于對(duì)ES6的語(yǔ)法并沒(méi)有完全掌握，這里暫時(shí)用ES5和ES6混用的語(yǔ)法。

View組件

View是一個(gè)支持Flexbox布局、樣式、一些觸摸處理、和一些無(wú)障礙功能的容器，并且它可以放到其它的視圖里，也可以有任意多個(gè)任意類(lèi)型的子視圖。

View的設(shè)計(jì)初衷是和StyleSheet搭配使用，這樣可以使代碼更清晰并且獲得更高的性能。盡管內(nèi)聯(lián)樣式也同樣可以使用。

View的常用樣式設(shè)置

flex布局樣式
backgroundColor：背景顏色
borderColor：邊框顏色
borderWidth：邊框大小
borderRadius：圓角

以手機(jī)端攜程官網(wǎng)為示例

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}>特價(jià)酒店</Text>
  </View>
 </View>
 <View style={styles.flex}>
  <View style={[styles.flex, styles.bottomLine, styles.center]}>
  <Text style={styles.white}>團(tuán)購(gòu)</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);

最后效果：

React-Native中一些常用組件的用法詳解(一)

Text組件

一個(gè)用于顯示文本的React組件，并且它也支持嵌套、樣式，以及觸摸處理。

常用特性

onPress：手指觸摸事件
numberOfLines ：顯示多少行

常用樣式設(shè)置

color：字體顏色
fontSize：字體大小
fontWeight：字體加粗
textAlign：對(duì)齊方式

以手機(jī)端網(wǎng)易新聞為示例

創(chuàng)建header.js和news.js兩個(gè)文件

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}>網(wǎng)易</Text>
  <Text style={styles.white}>新聞</Text>
  <Text>有態(tài)度</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、新華社用"罕見(jiàn)"為里皮點(diǎn)贊:他是國(guó)足的不二選擇',
 '2、干部動(dòng)員拆遷遭襲身亡 是否同意拆除雙方說(shuō)法不',
 '3、母親欠債遭11人凌辱 兒子目睹后刺死1人被判無(wú)期',
 '4、美媒:美轟炸機(jī)進(jìn)入中國(guó)東海防空識(shí)別區(qū)遭中方警告'
];
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);

最后效果：

React-Native中一些常用組件的用法詳解(一)

Touchable類(lèi)組件

該組件用于封裝視圖，使其可以正確響應(yīng)觸摸操作

常用樣式設(shè)置

TouchableOpcity：透明觸摸，點(diǎn)擊時(shí)，組件會(huì)出現(xiàn)透明過(guò)度效果。
TouchableHighlight：高亮觸摸，點(diǎn)擊時(shí)組件會(huì)出現(xiàn)高亮效果。
TouchableWithoutFeedback：無(wú)反饋觸摸，點(diǎn)擊時(shí)候，組件無(wú)視覺(jué)變化。

示例

創(chuàng)建一個(gè)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}>點(diǎn)了{(lán)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);

最后效果：

React-Native中一些常用組件的用法詳解(一)

圖片轉(zhuǎn)換成gif圖可能會(huì)失去一些效果，點(diǎn)擊TouchableOpacity按鈕會(huì)變透明，點(diǎn)擊TouchableHighlight按鈕的背景顏色會(huì)改變，點(diǎn)擊TouchableWithoutFeedback按鈕沒(méi)有任何變化

TextInput組件

TextInput是一個(gè)允許用戶(hù)在應(yīng)用中通過(guò)鍵盤(pán)輸入文本的基本組件。本組件的屬性提供了多種特性的配置，譬如自動(dòng)完成、自動(dòng)大小寫(xiě)、占位文字，以及多種不同的鍵盤(pán)類(lèi)型（如純數(shù)字鍵盤(pán)）等等。

常用屬性

placeholder占位符；
value 輸入框的值；
password 是否密文輸入；
editable 輸入框是否可編輯
returnkeyType 鍵盤(pán)return鍵類(lèi)型；
onChange 當(dāng)文本變化時(shí)候調(diào)用；
onEndEditing 當(dāng)結(jié)束編輯時(shí)調(diào)用；
onSubmitEding 當(dāng)結(jié)束編輯提交按鈕時(shí)候調(diào)動(dòng)；
onChangeText:讀取TextInput的用戶(hù)輸入；

示例

創(chuàng)建一個(gè)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={"請(qǐng)輸入"} 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);

最后效果：

React-Native中一些常用組件的用法詳解(一)

Image組件

一個(gè)用于顯示多種不同類(lèi)型圖片的React組件，包括網(wǎng)絡(luò)圖片、靜態(tài)資源、臨時(shí)的本地圖片、以及本地磁盤(pán)上的圖片（如相冊(cè)）等。

靜態(tài)圖片加載

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

網(wǎng)絡(luò)圖片加載

注意：網(wǎng)絡(luò)圖片請(qǐng)求http請(qǐng)求的xcode需要做一個(gè)設(shè)置info.plist里的Allow Arbitrary Loads后面的no改成yes。
通過(guò)source指定圖片地址，代碼如下： <Image source=(注意這里要雙花括號(hào)，因?yàn)樘厥庠蛑荒茱@示單花括號(hào)){uri: ‘https://facebook.github.io/react/img/logo_og.png'}(注意這里要雙花括號(hào)，因?yàn)樘厥庠蛑荒茱@示單花括號(hào))/>

示例

創(chuàng)建一個(gè)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中一些常用組件的用法詳解(一)

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

分享題目：React-Native中一些常用組件的用法詳解(一)
URL分享：http://aaarwkj.com/article10/gojhgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣、外貿(mào)建站、品牌網(wǎng)站設(shè)計(jì)、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

React-Native中一些常用組件的用法詳解(一)