React-Native中一些常用組件的用法詳解(一)
更新時間：2017年06月26日 10:19:55 作者：lymooz
這篇文章主要跟大家分享了關(guān)于React-Native中一些常用組件的用法，其中包括View組件、Text組件、Touchable類組件、TextInput組件以及Image組件的使用方法，分別給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。
前言
本文為大家介紹一下React-Native中一些常用的組件，由于對ES6的語法并沒有完全掌握，這里暫時用ES5和ES6混用的語法。
View組件
View是一個支持Flexbox布局、樣式、一些觸摸處理、和一些無障礙功能的容器，并且它可以放到其它的視圖里，也可以有任意多個任意類型的子視圖。
View的設(shè)計初衷是和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}>特價酒店</Text>
</View>
</View>
<View style={styles.flex}>
<View style={[styles.flex, styles.bottomLine, styles.center]}>
<Text style={styles.white}>團(tuán)購</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 ：顯示多少行
常用樣式設(shè)置
- color：字體顏色
- fontSize：字體大小
- fontWeight：字體加粗
- textAlign：對齊方式
以手機(jī)端網(wǎng)易新聞為示例
創(chuàng)建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}>網(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;Touchable類組件
該組件用于封裝視圖，使其可以正確響應(yīng)觸摸操作
常用樣式設(shè)置
- TouchableOpcity：透明觸摸，點擊時，組件會出現(xiàn)透明過度效果。
- TouchableHighlight：高亮觸摸，點擊時組件會出現(xiàn)高亮效果。
- TouchableWithoutFeedback：無反饋觸摸，點擊時候，組件無視覺變化。
示例
創(chuàng)建一個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}>點了{(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);最后效果：
圖片轉(zhuǎn)換成gif圖可能會失去一些效果，點擊TouchableOpacity按鈕會變透明，點擊TouchableHighlight按鈕的背景顏色會改變，點擊TouchableWithoutFeedback按鈕沒有任何變化
TextInput組件
TextInput是一個允許用戶在應(yīng)用中通過鍵盤輸入文本的基本組件。本組件的屬性提供了多種特性的配置，譬如自動完成、自動大小寫、占位文字，以及多種不同的鍵盤類型（如純數(shù)字鍵盤）等等。
常用屬性
- placeholder占位符；
- value 輸入框的值；
- password 是否密文輸入；
- editable 輸入框是否可編輯
- returnkeyType 鍵盤return鍵類型；
- onChange 當(dāng)文本變化時候調(diào)用；
- onEndEditing 當(dāng)結(jié)束編輯時調(diào)用；
- onSubmitEding 當(dāng)結(jié)束編輯提交按鈕時候調(diào)動；
- onChangeText:讀取TextInput的用戶輸入；
示例
創(chuàng)建一個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組件，包括網(wǎng)絡(luò)圖片、靜態(tài)資源、臨時的本地圖片、以及本地磁盤上的圖片（如相冊）等。
靜態(tài)圖片加載
直接引入，代碼如下： <Image source={require(‘./my-icon.png’)} />
網(wǎng)絡(luò)圖片加載
注意：網(wǎng)絡(luò)圖片請求http請求的xcode需要做一個設(shè)置info.plist里的Allow Arbitrary Loads后面的no改成yes。
通過source指定圖片地址，代碼如下： <Image source=(注意這里要雙花括號，因為特殊原因只能顯示單花括號){uri: ‘https://facebook.github.io/react/img/logo_og.png’}(注意這里要雙花括號，因為特殊原因只能顯示單花括號)/>
示例
創(chuàng)建一個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);最后效果：
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
React鉤子函數(shù)之useDeferredValue的基本使用示例詳解
useDeferredValue是React 18中非常有用的一個鉤子函數(shù)，它可以幫助我們優(yōu)化渲染性能，并讓UI更加流暢，如果你還沒有嘗試過它，不妨在你的下一個React項目中試一試，這篇文章主要介紹了React鉤子函數(shù)之useDeferredValue的基本使用,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了ReactNative集成個推消息推送過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了React html中使用react的兩種方式,本文給大家提到了React pwa的配置代碼，給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進(jìn)行綁定，節(jié)后實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
React-Native TextInput組件詳解及實例代碼
這篇文章主要介紹了React-Native TextInput組件詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
React組件創(chuàng)建與事件綁定的實現(xiàn)方法
react事件綁定時。this并不會指向當(dāng)前DOM元素。往往使用bind來改變this指向，今天通過本文給大家介紹React事件綁定的方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
解析react?函數(shù)組件輸入卡頓問題?usecallback?react.memo
useMemo是一個react hook,我們可以使用它在組件中包裝函數(shù)。可以使用它來確保該函數(shù)中的值僅在依賴項之一發(fā)生變化時才重新計算，這篇文章主要介紹了react?函數(shù)組件輸入卡頓問題?usecallback?react.memo,需要的朋友可以參考下2022-07-07
React文件名和目錄規(guī)范最佳實踐記錄(總結(jié)篇)
React在使用時非常靈活，如果沒有一個規(guī)范約束項目，在開發(fā)過程中會非?；靵y，本文將介紹幾個優(yōu)秀的規(guī)范，介紹文件名和目錄前，需要先簡述一下幾種通用的類型，用來區(qū)分文件的功能，感興趣的朋友一起看看吧2022-05-05
深入理解React中es6創(chuàng)建組件this的方法
this的本質(zhì)可以這樣說，this跟作用域無關(guān)的，只跟執(zhí)行上下文有關(guān)。接下來通過本文給大家介紹React中es6創(chuàng)建組件this的方法，非常不錯，感興趣的朋友一起看看吧2016-08-08
在項目開發(fā)過程中,對于復(fù)雜的業(yè)務(wù)選擇功能很常見,下面這篇文章主要給大家介紹了關(guān)于React創(chuàng)建對話框組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05