react-native 經常使用組件
組件php
1.ActivityIndicator
顯示一個圓形的loading提示符號。
屬性：
(1)animating(bool): 是否要顯示指示器，默認爲true，表示顯示;
(2)color(string): 滾輪的前景顏色;
(3)(ios)hidesWhenStopped(bool): 在沒有動畫的時候，是否要隱藏指示器(默認爲true);
(4)size(enum('small', 'large')): 指示器的大小。small的高度爲20，large爲36。react
import React, { Component } from 'react';
import { ActivityIndicator, StyleSheet, View, TouchableOpacity, Text } from 'react-native';
export default class MyActivityIndicator extends Component {
constructor(){
super();
this.state = {
animating: true
};
}
componentDidMount() {
var timer = setInterval(()=>{
var animating = this.state.animating;
animating = animating ? false : true;
this.setState({
animating: animating
})
},1000)
}
componentWillUnmount() {
// 若是存在this.timer，則使用clearTimeout清空。
// 若是你使用多個timer，那麼用多個變量，或者用個數組來保存引用，而後逐個clear
this.timer && clearTimeout(this.timer);
}
render() {
return (
<View style={styles.container}>
<ActivityIndicator
animating={this.state.animating}
style={[styles.centering, {height: 80}]}
size="small" color='gray' />
<ActivityIndicator
animating={this.state.animating}
style={[styles.centering, {height: 80}]}
size="large" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
centering: {
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
btn:{
marginTop:10,
width:150,
height:35,
backgroundColor:'#3BC1FF',
justifyContent:'center',
alignItems:'center',
borderRadius:4,
},
});
2.DrawerLayoutAndroid
僅限安卓平臺android
import React, { Component } from 'react';
import { Text, View, DrawerLayoutAndroid, TextInput, TouchableHighlight } from 'react-native';
export default class MyDrawerLayoutAndroid extends Component {
openDrawer(){
this.refs.drawerLayout.openDrawer()
}
closeDrawer(){
this.refs.drawerLayout.closeDrawer()
}
drawerStateChanged(state){
console.log(state);
// Idle（空閒），表示如今導航條上沒有任何正在進行的交互。
// Dragging（拖拽中），表示用戶正在與導航條進行交互。
// Settling（停靠中），表示用戶剛剛結束與導航條的交互，導航條正在結束打開或者關閉的動畫。
}
render() {
var navigationView = (
<View style={{flex:1,backgroundColor:'#fff'}}>
<Text style={{paddingTop: 30, margin:20,fontSize:24,color:'#188eee'}}>
我是側邊欄/抽屜
</Text>
<TextInput style={{width:300,height:40,backgroundColor:'#fff'}}/>
<TouchableHighlight
onPress={()=>this.closeDrawer()}
style={{padding:10,backgroundColor:'#e6e6e6',marginTop:20}}
>
<Text style={{textAlign:'center',}}>
closeDrawer:關閉抽屜
</Text>
</TouchableHighlight>
</View>
);
return (
<DrawerLayoutAndroid drawerBackgroundColor="rgba(188,0,202,0.2)"
ref={'drawerLayout'}
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Right}
renderNavigationView={() => navigationView}
onDrawerOpen={()=>{console.log('打開了')}}
onDrawerClose={()=>{console.log('關閉了')}}
onDrawerSlide={()=>console.log("正在交互......")}
onDrawerStateChanged={(state)=>this.drawerStateChanged(state)}
drawerLockMode='unlocked'
keyboardDismissMode="on-drag"
statusBarBackgroundColor='#ccc'>
<View style={{height: 150, alignItems: 'center'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>往左邊滑動</Text>
</View>
<TouchableHighlight
onPress={()=>this.openDrawer()}
style={{padding:10,backgroundColor:'#e6e6e6'}}>
<Text style={{textAlign:'center',}}>
openDrawer:打開抽屜
</Text>
</TouchableHighlight>
<TextInput style={{width:410,height:40,backgroundColor:'#fff'}}/>
</DrawerLayoutAndroid>
)
}
}
3.Image
在Android上支持GIF和WebP格式圖片:
默認狀況下Android是不支持GIF和WebP格式的,須要在android/app/build.gradle文件中根據須要手動添加如下模塊：ios
dependencies {
// 若是你須要支持Android4.0(API level 14)以前的版本
compile 'com.facebook.fresco:animated-base-support:0.11.0'
// 若是你須要支持GIF動圖
compile 'com.facebook.fresco:animated-gif:0.11.0'
// 若是你須要支持WebP格式，包括WebP動圖
compile 'com.facebook.fresco:animated-webp:0.11.0'
compile 'com.facebook.fresco:webpsupport:0.11.0'
// 若是隻須要支持WebP格式而不須要動圖
compile 'com.facebook.fresco:webpsupport:0.11.0'
}
屬性：
(1)onLayout(function):當元素掛載或者佈局改變的時候調用，參數爲：{nativeEvent: {layout: {x, y, width, height}}};
(2)onLoad(function):加載成功完成時調用此回調函數;
(3)onLoadEnd(function):加載結束後，不論成功仍是失敗，調用此回調函數;
(4)onLoadStart(function):加載開始時調用;
(5)resizeMode(enum('cover', 'contain', 'stretch', 'repeat', 'center')):決定當組件尺寸和圖片尺寸不成比例的時候如何調整圖片的大小。web
[1]cover: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大於等於容器視圖的尺寸（若是容器有padding內襯的話，則相應減去）。譯註：這樣圖片徹底覆蓋甚至超出容器，容器中不留任何空白。 [2]contain: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小於等於容器視圖的尺寸（若是容器有padding內襯的話，則相應減去）。譯註：這樣圖片徹底被包裹在容器中，容器中可能留有空白。 [3]stretch: 拉伸圖片且不維持寬高比，直到寬高都恰好填滿容器。 [4]repeat: 重複平鋪圖片直到填滿容器。圖片會維持原始尺寸。僅iOS可用。 [5]center: 居中不拉伸。
(6)source {uri: string}:uri是一個表示圖片的資源標識的字符串，它能夠是一個http地址或是一個本地文件路徑（使用require(相對路徑)來引用）。
(7)stylereact-native
4.KeyboardAvoidingView
本組件用於解決一個常見的尷尬問題：手機上彈出的鍵盤經常會擋住當前的視圖。本組件能夠自動根據鍵盤的位置，調整自身的position或底部的padding，以免被遮擋。api
import React, { Component } from 'react';
import { StyleSheet, Text, TextInput, KeyboardAvoidingView, View } from 'react-native';
export default class MyKeyboardAvoidingView extends Component {
//behavior位移焦點時就使用哪一個屬性來自適應，該參數的可選值爲：height, position, padding
render() {
return (
<View style={styles.container}>
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<TextInput
underlineColorAndroid={'#fff'}
placeholder="這裏是一個簡單的輸入框"
style={styles.textInput} />
</KeyboardAvoidingView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'white',
justifyContent: 'center',
paddingHorizontal: 20,
paddingVertical: 5,
},
textInput: {
borderRadius: 5,
borderWidth: 1,
width: 300,
height: 100,
paddingHorizontal: 10,
},
});
5.ScrollView
記住ScrollView必須有一個肯定的高度才能正常工做(要麼直接給它設置高度（不建議），要麼flex:1)。
屬性：
(1)contentContainerStyle(StyleSheetPropType(ViewStylePropTypes)):這些樣式會應用到一個內層的內容容器上，全部的子視圖都會包裹在內容容器內。例子：數組
return (
<ScrollView contentContainerStyle={styles.contentContainer}>
</ScrollView>
);
...
var styles = StyleSheet.create({
contentContainer: {
paddingVertical: 20
}
});
(2)horizontal(bool):當此屬性爲true的時候，全部的子視圖會在水平方向上排成一行，而不是默認的在垂直方向上排成一列。默認值爲false。
(3)keyboardDismissMode(enum('none', "interactive", 'on-drag')):用戶拖拽滾動視圖的時候，是否要隱藏軟鍵盤。安全
none（默認值），拖拽時不隱藏軟鍵盤。 on-drag 當拖拽開始的時候隱藏軟鍵盤。 interactive 軟鍵盤伴隨拖拽操做同步地消失，而且若是往上滑動會恢復鍵盤。安卓設備上不支持這個選項，會表現的和none同樣。
(4)keyboardShouldPersistTaps(enum('always', 'never', 'handled', false, true)):
若是當前界面有軟鍵盤，那麼點擊scrollview後是否收起鍵盤，取決於本屬性的設置。（譯註：不少人反應TextInput沒法自動失去焦點/須要點擊屢次切換到其餘組件等等問題，其關鍵都是須要將TextInput放到ScrollView中再設置本屬性）:網絡
'never'（默認值），點擊TextInput之外的子組件會使當前的軟鍵盤收起。此時子元素不會收到點擊事件。 'always'，鍵盤不會自動收起，ScrollView也不會捕捉點擊事件，但子組件能夠捕獲。 'handled'，當點擊事件被子組件捕獲時，鍵盤不會自動收起。這樣切換TextInput時鍵盤能夠保持狀態。多數帶有TextInput的狀況下你應該選擇此項。 false，已過時，請使用'never'代替。 true，已過時，請使用'always'代替。
(5)showsHorizontalScrollIndicator(bool): 當此屬性爲true的時候，顯示一個水平方向的滾動條。
(6)showsVerticalScrollIndicator(bool):當此屬性爲true的時候，顯示一個垂直方向的滾動條。
(7)style
(8)pagingEnabled(bool): 當值爲true時，滾動條會停在滾動視圖的尺寸的整數倍位置。這個能夠用在水平分頁上。默認值爲false。
(9)scrollEnabled(bool):當值爲false的時候，內容不能滾動，默認值爲true。
(10)onContentSizeChange(function):此函數會在ScrollView內部可滾動內容的視圖發生變化時調用。
調用參數爲內容視圖的寬和高: (contentWidth, contentHeight)
此方法是經過綁定在內容容器上的onLayout來實現的。
(11)onScroll(function):在滾動的過程當中，每幀最多調用一次此回調函數。調用的頻率能夠用scrollEventThrottle屬性來控制。
(12)removeClippedSubviews(bool):（實驗特性）：當此屬性爲true時，屏幕以外的子視圖（子視圖的overflow樣式須要設爲hidden）會被移除。這個能夠提高大列表的滾動性能。默認值爲true。
(13)refreshControl(element): 指定RefreshControl組件，用於爲ScrollView提供下拉刷新功能。
方法：
(1)scrollTo(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)
滾動到指定的x, y偏移處。第三個參數爲是否啓用平滑滾動動畫。
使用示例:scrollTo({x: 0, y: 0, animated: true})
(2)scrollToEnd(options?):滾動到視圖底部（水平方向的視圖則滾動到最右邊）。
加上動畫參數 scrollToEnd({animated: true})則啓用平滑滾動動畫，或是調用 scrollToEnd({animated: false})來當即跳轉。若是不使用參數，則animated選項默認啓用。
import React, { Component } from 'react';
import { StyleSheet, ScrollView, View } from 'react-native';
export default class MyScrollView extends Component {
renderItem() {
// 數組
var itemArray = [];
// 顏色數組
var colorArray = ['gray', 'green', 'blue', 'yellow', 'black', 'orange'];
// 遍歷
for (var i = 0; i<colorArray.length; i++) {
itemArray.push(
<View key={i} style={[styles.itemStyle, {backgroundColor: colorArray[i]}]}></View>
);
}
return itemArray;
}
render(){
return(
<ScrollView horizontal={true}>
{this.renderItem()}
</ScrollView>
);
}
}
var styles = StyleSheet.create({
itemStyle: {
// 尺寸
width: 480,
height: 200,
},
});
6.RefreshControl
這一組件能夠用在ScrollView或ListView內部，爲其添加下拉刷新的功能。當ScrollView處於豎直方向的起點位置（scrollY: 0），此時下拉會觸發一個onRefresh事件。
屬性：
(1)onRefresh(function):在視圖開始刷新時調用。
(2)refreshing(bool):視圖是否應該在刷新時顯示指示器。
7.ListView
最簡單的例子：
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2']),
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
);
}
屬性：
(1)dataSource:ListView.DataSource實例（列表依賴的數據源）
(2)initialListSize(number): 指定在組件剛掛載的時候渲染多少行數據。用這個屬性來確保首屏顯示合適數量的數據，而不是花費太多幀逐步顯示出來。
(3)onEndReached(function):當全部的數據都已經渲染過，而且列表被滾動到距離最底部不足onEndReachedThreshold個像素的距離時調用。原生的滾動事件會被做爲參數傳遞。譯註：當第一次渲染時，若是數據不足一屏（好比初始值是空的），這個事件也會被觸發，請自行作標記過濾。
(4)onEndReachedThreshold(number):調用onEndReached以前的臨界值，單位是像素。
(5)pageSize(number):每次事件循環（每幀）渲染的行數。
(6)removeClippedSubviews(bool):用於提高大列表的滾動性能。須要給行容器添加樣式overflow:'hidden'。（Android已默認添加此樣式）。此屬性默認開啓。
(7)renderRow(function):
(rowData, sectionID, rowID, highlightRow) => renderable
從數據源(Data source)中接受一條數據，以及它和它所在section的ID。返回一個可渲染的組件來爲這行數據進行渲染。默認狀況下參數中的數據就是放進數據源中的數據自己，不過也能夠提供一些轉換器。
若是某一行正在被高亮（經過調用highlightRow函數），ListView會獲得相應的通知。當一行被高亮時，其兩側的分割線會被隱藏。行的高亮狀態能夠經過調用highlightRow(null)來重置。
方法：
(1)getMetrics():導出一些用於性能分析的數據。
(2)scrollTo(...args):滾動到指定的x, y偏移處，能夠指定是否加上過渡動畫。
(3)scrollToEnd(options?):
滾動到視圖底部（水平方向的視圖則滾動到最右邊）。
加上動畫參數 scrollToEnd({animated: true})則啓用平滑滾動動畫，或是調用 scrollToEnd({animated: false})來當即跳轉。若是不使用參數，則animated選項默認啓用。
實例核心代碼：
//更新個人訂單記錄數據
getClientListData() {
//接口
var PageCount=result.PageCount;
var orderList=result.OrderList ? result.OrderList : [];
this.setState({
loadMore:PageCount > 1 ? true : false,
resCount:orderList.length,
PageCount:PageCount,
})
if(orderList.length<=0){
this.setState({
resCount:0
})
}
this.timer = setTimeout(() =>{
this.setState({
loaded:true,
recordData:this.state.recordData.cloneWithRows(this._linkCallList(orderList)),
});
}, 400);
this.timer2 = setTimeout(() =>{
this.setState({isRefreshing: false,});
}, 600);
}, (err) => {
})
}
//鏈接數據
_linkCallList(data){
if(!this.state.resList){
var newData = data;
}
else{
var oldData= this.state.resList;
var newData = oldData.concat(data);
}
if(this.state.PageIndex < this.state.PageCount){
this.setState({
resList:newData,
MoreData:this.state.MoreData.cloneWithRows(newData.concat([{load:true}])),
})
}
else if(this.state.resCount>0){
this.setState({
resList:newData,
MoreData:this.state.MoreData.cloneWithRows(newData.concat([{loadEnd:true}])),
})
}
return newData;
}
//下拉刷新
_onRefresh() {
this.setState({
resList:null,
isRefreshing:true,
PageIndex:1,
},()=>{
//刷新數據
this.getClientListData();
})
}
//下拉加載
_endReach(){
if(this.state.PageIndex < this.state.PageCount){
this.setState({
PageIndex:this.state.PageIndex+1,//頁標
loadMore:true,
},()=>{
this.getClientListData();
})
}
}
//處理錯誤
handleError(err){
this.setState({isRefreshing: false,loaded: true});
if(this.state.PageIndex > 1){
this.setState({
MoreData:this.state.MoreData.cloneWithRows(this.state.resList.concat([{netErr:true}])),
})
}
if(err == FetchResult.TIMEOUT){
ToastShow('網絡請求超時，請稍後再試');
}else if(err == FetchResult.NETWORKERR){
ToastShow('沒有網絡鏈接，請稍後再試');
}else{
ToastShow('網絡異常，請稍後再試');
}
}
//從新加載
retryData(){
this.setState({
MoreData:this.state.MoreData.cloneWithRows(this.state.resList.concat([{load:true}])),
},()=>{
this.getClientListData();
})
}
getScrollViewRef(component) {
this.scrollViewRef = component;
}
//渲染列表
_renderList(){
if(this.state.resCount==0&&this.state.PageIndex==1){
return (
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._onRefresh.bind(this)}
colors={['#3ac569']}
tintColor={'#3ac569'}
progressBackgroundColor='#fff' />
}>
<View style={styles.TextView}>
<View style={styles.recordBox}>
<Image style={styles.searchIcon} source={IconData.searchIcon} />
<Text style={styles.noText}>沒有相關記錄</Text>
</View>
</View>
</ScrollView>
);
}
else{
return (
<ListView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh.bind(this)}
colors={['#3ac569']}
tintColor={'#3ac569'}
progressBackgroundColor='#fff'/>
}
style={[styles.listView,this.state.style]}
dataSource={this.state.loadMore ? this.state.MoreData : this.state.recordData}
renderRow={this._renderRow.bind(this)}
initialListSize={200}
pageSize = {10}
onEndReachedThreshold = { 40 }
onEndReached ={this.endReached.bind(this)}
ref={(component) => this.getScrollViewRef(component)} />
);
}
}
_renderRow(rowData){
if(rowData.load){
return (
<View style={{flex:1,height:25,flexDirection:'row',justifyContent:'center',alignItems:'center',marginBottom:10,}}>
<ActivityIndicator
style={[styles.centering, {height: 40}]}
size="small" color='#3ac569'
/>
<Text style={{marginLeft:5}}>正在加載中...</Text>
</View>
);
}
else if(rowData.netErr){
return (
<TouchableOpacity
onPress={()=>{ this.props.retryData(); }
}>
<View style={{flex:1,height:25,flexDirection:'row',justifyContent:'center',alignItems:'center',marginBottom:10,}}>
<Text>
網絡數據錯誤，點擊再試
</Text>
</View>
</TouchableOpacity>
);
}
else if(rowData.loadEnd){
return (
<View style={{flex:1,height:25,flexDirection:'row',justifyContent:'center',alignItems:'center',marginBottom:10,}}>
<Text>沒有更多數據了</Text>
</View>
);
}
return (
<Text>rowData.id</Text>
);
}
render() {
if(!this.state.loaded){
return(
<View style={{flex:1,backgroundColor:WinStyle.PageBGColor}}>
<View style={{height:300,flexDirection:'column',justifyContent:'center',alignItems:'center'}}>
<Loading />
</View>
{this._renderBottomBar()}
</View>);
}
else{
return (
<View style={{flex:1,backgroundColor:WinStyle.PageBGColor}}>
<View style={{flex:1,marginBottom:50}}>
{this._renderList()}
</View>
{this._renderBottomBar()}
</View>
);
}
8.Modal
Modal組件能夠用來覆蓋包含React Native根視圖的原生視圖（如UIViewController，Activity）。
在嵌入React Native的混合應用中可使用Modal。Modal可使你應用中RN編寫的那部份內容覆蓋在原生視圖上顯示。
屬性:
(1)animationType:
slide slides in from the bottom fade fades into view none appears without an animation
(2)onRequestClose:
The onRequestClose prop allows passing a function that will be called once the modal has been dismissed.
On the Android platform, this is a required function.
(3)onShow:
The onShow prop allows passing a function that will be called once the modal has been shown.
(4)transparent:
The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.
(5)visible:
The visible prop determines whether your modal is visible.
import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View } from 'react-native';
class ModalExample extends Component {
constructor(props) {
super(props);
this.state = {modalVisible: false};
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style={{marginTop: 22}}>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {alert("Modal has been closed.")}}
>
<View style={{marginTop: 22}}>
<View>
<Text>Hello World!</Text>
<TouchableHighlight onPress={() => {
this.setModalVisible(!this.state.modalVisible)
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight onPress={() => {
this.setModalVisible(true)
}}>
<Text>Show Modal</Text>
</TouchableHighlight>
</View>
);
}
}
9.Picker
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, PiexRatio, TouchableOpacity, Picker } from 'react-native';
export default class MyPicker extends Component {
constructor(props) {
super(props);
this.state = {
language: '',
dropdown: ''
}
}
onValueChange(flag, value, index){
console.log(index);// 0 1 2 3
if(flag == 1){
this.setState({language:value});
}else{
this.setState({dropdown:value});
}
}
render() {
return (
<View style={{ }}>
<Text>Picker組件</Text>
<Picker
selectedValue={this.state.language}
onValueChange={(value, index) => this.onValueChange(1,value,index)}
mode="dialog"
style={{color:'#f00', width:150}}
prompt="對話框標題"
>
<Picker.Item label="Java" value="Java"/>
<Picker.Item label="JavaScript" value="js"/>
<Picker.Item label="C語言" value="c"/>
<Picker.Item label="PHP開發" value="php"/>
</Picker>
<Picker
mode={'dropdown'}
style={{width:150}}
selectedValue={this.state.dropdown}
onValueChange={(value, index)=>this.onValueChange(2,value,index)}>
<Picker.Item label="我是下拉菜單1" value="key0" />
<Picker.Item label="我是下拉菜單2" value="key1" />
<Picker.Item label="我是下拉菜單3" value="key2" />
<Picker.Item label="我是下拉菜單4" value="key3" />
</Picker>
<Text style={{ height: 30 }}>{this.state.language}</Text>
<Text style={{ height: 30 }}>{this.state.dropdown}</Text>
</View>
);
}
}
10.SegmentedControlIOS
使用SegmentedControlIOS來在iOS設備上渲染一個UISegmentedControl組件。這是一個分段顯示多個選項的組件。
<SegmentedControlIOS style={{marginTop:20}} tintColor="#00ff00" momentary={true} values={['One', 'Two', 'Three']} onChange={(e)=>alert(e)} onValueChange={(value)=>alert(value)} selectedIndex={1}/>
11.Slider
用於選擇一個範圍值的組件。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Slider,
View
} from 'react-native';
export default class SliderDemoextendsComponent extends Component {
constructor(){
super()
this.state={
slideCompletionValue: 50,
}
}
render() {
return (
<View style={styles.container}>
<Slider
style={{width:200}}
maximumValue={100}
minimumValue={0}
step={1}
value={50}
maximumTrackTintColor='#f00'
onSlidingComplete={(value)=>this.setState({slideCompletionValue:value})}
>
</Slider>
<Text>選擇的值：{this.state.slideCompletionValue}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
12.StatusBar
<View>
<StatusBar
animated={true}
hidden={false}
backgroundColor={'blue'}
translucent={true}
barStyle={'default'}
showHideTransition={'fade'}
networkActivityIndicatorVisible={true}
/>
</View>
13.Switch
constructor(){
super();
this.state={
trueSwitchIsOn: true,
falseSwitchIsOn: false,
}
}
render() {
return (
<View style={styles.container}>
<Text>
Swtich實例
</Text>
<Switch
onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
style={{marginBottom:10,marginTop:10}}
onTintColor='#f00'
thumbTintColor='#00f'
tintColor='#0f0'
value={this.state.falseSwitchIsOn} />
<Switch
onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
value={this.state.trueSwitchIsOn} />
</View>
);
}
14.Text
(1)adjustsFontSizeToFit(bool):指定字體是否隨着給定樣式的限制而自動縮放。
(2)allowFontScaling(bool):控制字體是否要根據系統的「字體大小」輔助選項來進行縮放。
(3)numberOfLines(number):用來當文本過長的時候裁剪文本。包括摺疊產生的換行在內，總的行數不會超過這個屬性的限制。
(4)onLayout(function):當掛載或者佈局變化之後調用，參數爲以下的內容：
{nativeEvent: {layout: {x, y, width, height}}}
(5)onLongPress(function):當文本被長按之後調用此回調函數。
(6)onPress(function):當文本被點擊之後調用此回調函數。
(7)selectable(bool):決定用戶是否能夠長按選擇文本，以便複製和粘貼。
15.TextInput
TextInput是一個容許用戶在應用中經過鍵盤輸入文本的基本組件。本組件的屬性提供了多種特性的配置，譬如自動完成、自動大小寫、佔位文字，以及多種不一樣的鍵盤類型（如純數字鍵盤）等等。TextInput在安卓上默認有一個底邊框，同時會有一些padding。若是要想使其看起來和iOS上儘可能一致，則須要設置padding: 0，同時設置underlineColorAndroid="transparent"來去掉底邊框。
屬性:
(1)autoCapitalize(enum('none', 'sentences', 'words', 'characters')):
控制TextInput是否要自動將特定字符切換爲大寫：
characters: 全部的字符。 words: 每一個單詞的第一個字符。 sentences: 每句話的第一個字符（默認）。 none: 不自動切換任何字符爲大寫。
(2)autoCorrect(bool):
若是爲false，會關閉拼寫自動修正。默認值是true。
(3)autoFocus(bool):
若是爲true，在componentDidMount後會得到焦點。默認值爲false。
(4)blurOnSubmit(bool):
若是爲true，文本框會在提交的時候失焦。對於單行輸入框默認值爲true，多行則爲false。注意：對於多行輸入框來講，若是將blurOnSubmit設爲true，則在按下回車鍵時就會失去焦點同時觸發onSubmitEditing事件，而不會換行。
(5)caretHidden(bool):
若是爲true，則隱藏光標。默認值爲false
(6)defaultValue(string):
提供一個文本框中的初始值。當用戶開始輸入的時候，值就能夠改變。
在一些簡單的使用情形下，若是你不想用監聽消息而後更新value屬性的方法來保持屬性和狀態同步的時候，就能夠用defaultValue來代替。
(7)editable(bool):
若是爲false，文本框是不可編輯的。默認值爲true。
(8)keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search')
決定彈出的何種軟鍵盤的，譬如numeric（純數字鍵盤）。
這些值在全部平臺均可用：
default numeric email-address
(9)maxLength(number):
限制文本框中最多的字符數。使用這個屬性而不用JS邏輯去實現，能夠避免閃爍的現象。
(10)multiline(bool):
若是爲true，文本框中能夠輸入多行文字。默認值爲false。
(11)onBlur(function):
當文本框失去焦點的時候調用此回調函數。
(12)onChange(function):
當文本框內容變化時調用此回調函數。
(13)onChangeText(function):
當文本框內容變化時調用此回調函數。改變後的文字內容會做爲參數傳遞。
(14)onEndEditing(function):
當文本輸入結束後調用此回調函數。
(15)onFocus(function):
當文本框得到焦點的時候調用此回調函數。
(16)onLayout(function):
當組件掛載或者佈局變化的時候調用，參數爲{x, y, width, height}。
(17)onSubmitEditing(function):
此回調函數當軟鍵盤的肯定/提交按鈕被按下的時候調用此函數。若是multiline={true}，此屬性不可用。
(18)placeholder(string):
若是沒有任何文字輸入，會顯示此字符串。
(19)placeholderTextColor(color):
佔位字符串顯示的文字顏色。
(20)style
(21)value:文本框中的文字內容。
(22)secureTextEntry(bool):
若是爲true，文本框會遮住以前輸入的文字，這樣相似密碼之類的敏感文字能夠更加安全。默認值爲false。
(23)selectTextOnFocus(bool):
若是爲true，當得到焦點的時候，全部的文字都會被選中。
(24)selection({start: number, end: number}):
The start and end of the text input's selection. Set start and end to the same value to position the cursor.
(25)selectionColor(color):
設置輸入框高亮時的顏色（在iOS上還包括光標）
方法：
(1)isFocused()(boolean):
返回值代表當前輸入框是否得到了焦點。
(2)clear():清空輸入框的內容。
16.按鈕
(1)TouchableHighlight
(2)TouchableNativeFeedback
(3)TouchableOpacity
(4)TouchableWithoutFeedback
(5)Button
17.View
18.ViewPagerAndroid
一個容許在子視圖之間左右翻頁的容器。每個ViewPagerAndroid的子容器會被視做一個單獨的頁，而且會被拉伸填滿ViewPagerAndroid。
<ViewPagerAndroid
style={styles.viewPager}
initialPage={0}>
<View style={styles.pageStyle}>
<Text>First page</Text>
</View>
<View style={styles.pageStyle}>
<Text>Second page</Text>
</View>
</ViewPagerAndroid>
19.WebView
<WebView source={{uri: 'http://www.baidu.com'}} />
- 1. ReactNative: 使用網頁組件WebView組件
- 2. 1.1.5Angular2經常使用組件
- 3. react 經常使用組件
- 4. Android經常使用組件
- 5. java經常使用組件
- 6. Unity2D經常使用組件
- 7. cocos 經常使用組件
- 8. JMeter經常使用組件
- 9. SpringCloud 經常使用組件
- 10. Kettle — 經常使用組件使用
- 更多相關文章...
- • PHP 常量數組 - PHP 7 新特性
- • ASP AdRotator 組件 - ASP 教程
- • Composer 安裝與使用
- • 常用的分佈式事務解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. ReactNative: 使用網頁組件WebView組件
- 2. 1.1.5Angular2經常使用組件
- 3. react 經常使用組件
- 4. Android經常使用組件
- 5. java經常使用組件
- 6. Unity2D經常使用組件
- 7. cocos 經常使用組件
- 8. JMeter經常使用組件
- 9. SpringCloud 經常使用組件
- 10. Kettle — 經常使用組件使用