View
- 個人感覺
View就類似于html中的div標(biāo)簽克滴，支持flexbox布局。 - 一個簡單的練習(xí)，類似攜程的格子布局。
render() {
return (
<View style={[styles.flex]}>
<View style={styles.container}>
<View style={[styles.item,styles.center]}>
<Text style={styles.font}>酒店</Text>
</View>
<View style={[styles.item,styles.lineLeft]}>
<View style={[styles.flex,styles.center,styles.lineBottom]}>
<Text style={styles.font}>機票</Text>
</View>
<View style={[styles.flex,styles.center]}>
<Text style={styles.font}>火車票</Text>
</View>
</View>
<View style={[styles.item,styles.lineLeft]}>
<View style={[styles.flex,styles.center,styles.lineBottom]}>
<Text style={styles.font}>旅游</Text>
</View>
<View style={[styles.flex,styles.center]}>
<Text style={styles.font}>攻略</Text>
</View>
</View>
</View>
</View>
);
Text
-
Text類似于我們iOS開發(fā)中的UILabel控件极谊。 - 比
UILabel相比，我們實現(xiàn)富文本效果不必那么繁瑣安岂，因為Text組件可以嵌套轻猖，內(nèi)部Text組件可以繼承外部Text。這樣實現(xiàn)富文本效果只需要在內(nèi)層嵌套Text設(shè)置不同的樣式表style就可以域那。
<View style={styles.headBox}>
<Text style = {styles.font}>
<Text style = {styles.titleStyle1}>網(wǎng)易</Text>
<Text style = {styles.titleStyle2}>新聞</Text>
<Text style = {styles.titleStyle3}>有態(tài)度"</Text>
</Text>
</View>
-
Text可以通過onPress添加點擊事件咙边。注意方法的綁定，以及箭頭函數(shù)的使用次员。 -
onLongPress長按回調(diào)事件败许。 -
numberOfLines最多顯示多少行。 -
onLayout function當(dāng)組件布局發(fā)生變化時會調(diào)用這個方法翠肘。 -
adjustsFontSizeToFit指定字體是否隨著給定樣式的限制而自動縮放檐束。 -
allowFontScaling控制字體是否要根據(jù)系統(tǒng)的“字體大小”輔助選項來進行縮放辫秧。 -
selectable決定用戶是否可以長按選擇文本束倍，以便復(fù)制和粘貼。
Navigator
-
Navigator和NavigatorIOS都可以用來管理應(yīng)用中“場景”的導(dǎo)航（也可以稱作屏幕）盟戏。導(dǎo)航器建立了一個路由棧绪妹，用來彈出，推入或者替換路由狀態(tài)柿究。它們和html5中的history API很類似邮旷。主要的區(qū)別在于NavigatorIOS使用了iOS中的UINavigationController類，而Navigator則完全用js重寫了一個類似功能的React組件蝇摸。因此Navigator可以兼容iOS和Android婶肩，而NavigatorIOS只能用于iOS。 - 導(dǎo)航器通過路由對象來分辨不同的場景貌夕。利用
renderScene方法律歼，導(dǎo)航欄可以根據(jù)指定的路由來渲染場景。 - 可以通過
configureScene屬性獲取指定路由對象的配置信息啡专，從而改變場景的動畫或者手勢险毁。
render() {
let rootViewName = 'FirstView';
let rootComponent = FirstView;
return (
<Navigator
initialRoute = {{ name: rootViewName, component: rootComponent }}
configureScene = {(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJump ;
}}
renderScene = {(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator = {navigator} />
}} />
);
}
-
push方法中通過params傳遞參數(shù)，通過傳遞方法到二級頁面，pop時調(diào)用實現(xiàn)回調(diào)方法
push = (Id) =>{
var _this = this;
const navigator = this.props.navigator;
if (navigator) {
navigator.push({
name: 'SecondView',
component: SecondView,
params: {
id: Id,
getUser: function(user) {
_this.setState({
user: user
})
}
}
});
}
}
pop = () =>{
if (this.props.navigator) {
this.props.navigator.pop();
let user = USER_MODELS[this.state.Id];
this.props.getUser(user);
}
}
TextInput
-
autoCapitalize：枚舉類型畔况，可選值有none sentences wordscharacters 當(dāng)用戶輸入時鲸鹦，用于提示 -
placeholder：占位符，在輸入前顯示的文本內(nèi)容 -
value：文本輸入框的默認值 -
placeholderTextColor：占位符文本的顏色 -
password：boolean類型true表示密碼輸入顯示* -
multiline：多行輸入 -
editable：文本框是否可輸入 -
autoFocus:自動聚焦 -
clearButtonMode：枚舉類型跷跪，never while-editing unless-editing always用于顯示清除按鈕 -
maxLength：能夠輸入的最長字符數(shù) -
enablesReturnKeyAutomatically：如果為true表示沒有文本時鍵盤是不能有返回鍵的馋嗜，其默認值為false -
returnKeyType：枚舉類型default go google join next route search send yahoo done emergency-call表示軟鍵盤返回鍵顯示的字符串 -
secureTextEntry：隱藏輸入內(nèi)容，默認值為false -
onChangeText：當(dāng)文本輸入框的內(nèi)容變化時吵瞻，調(diào)用改函數(shù)嵌戈；onChangeText接收一個文本的參數(shù)對象 -
onChange：當(dāng)文本變化時，調(diào)用該函數(shù) -
onEndEditing：當(dāng)結(jié)束編輯時听皿，調(diào)用改函數(shù) -
onBlur：失去焦點觸發(fā)事件 -
onFocus：獲得焦點時觸發(fā)事件 -
onSubmitEditing：當(dāng)結(jié)束編輯后熟呛，點擊鍵盤的提交按鈕觸發(fā)該事件
Touchable類組件
-
TouchableHighlight高亮 - 屬性：
activeOpacity(設(shè)置透明度)、onHideUnderlay尉姨、onShowUnderlay庵朝、underlayColor(點擊時背景陰影效果的背景顏色) -
TouchableOpacity透明度 - 屬性：
activeOpacity -
TouchableWithoutFeedback無反饋 不會出現(xiàn)任何視覺變化 - 不建議使用；屬性：
onLongPress又厉、onPressIn九府、onPressOut - 在
app中我們希望點擊的時候會有一些視覺上的變化，這個變化會提醒我們已經(jīng)點擊過了覆致，從而避免重復(fù)點擊
Image
resizeMode：圖片適用的模式cover侄旬、contain、stretchsource:圖片的引用地址網(wǎng)絡(luò)圖片：
source={{uri:'http://.png'}}本地圖片：
source={require('./baidulogo.png')}靜態(tài)圖片資源：注意：如果你添加圖片的時候packager正在運行煌妈，則你需要重啟packager以便能正確引入新添加的圖片
注意：為了使新的圖片資源機制正常工作儡羔，require中的圖片名字必須是一個靜態(tài)字符串。
如果你在編寫一個混合
App（一部分UI使用React Native璧诵，而另一部分使用平臺原生代碼）汰蜘，也可以使用已經(jīng)打包到App中的圖片資源（通過Xcode的asset類目或者Android的drawable文件夾打包）
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />注意：這一做法并沒有任何安全檢查。你需要自己確保圖片在應(yīng)用中確實存在之宿，而且還需要指定尺寸
注意：網(wǎng)絡(luò)圖片族操，你需要手動指定圖片的尺寸
關(guān)于圖片的尺寸，
React Native會自動為你選好比被。如果沒有色难，則會選擇最接近的尺寸進行縮放，但也至少縮放到比所需尺寸大出50%等缀，以使圖片看起來仍然足夠清晰枷莉。這一切過程都是自動完成的，所以你不用操心自己去完成這些繁瑣且易錯的代碼项滑。
Picker
-
View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式) -
onValueChange function方法,當(dāng)選擇器item被選擇的時候進行調(diào)用依沮。該方法被調(diào)用的時候回傳入一下兩個參數(shù) -
itemValue:該屬性值為被選中的item的屬性值 -
itemPosition:該選擇器被選中的item的索引position -
selectedValue: any任何參數(shù)值涯贞，選擇器選中的item所對應(yīng)的值，該可以是一個字符串或者一個數(shù)字 -
style pickerStyleType該傳入style樣式危喉，設(shè)置picker的樣式風(fēng)格
enabled bool如果該值為false宋渔，picker就無法被點擊選中。例如:用戶無法進行做出選擇 -
mode enum ('dialog','dropdown')選擇器模式辜限。在Android平臺上面皇拣，設(shè)置mode可以控制用戶點擊picker彈出的樣式風(fēng)格 -
dialog:該值為默認值，進行彈出一個模態(tài)dialog(彈出框) -
dropdown:以picker視圖為基礎(chǔ)薄嫡，在該視圖下面彈出下拉框 -
prompt string設(shè)置picker的提示語(標(biāo)題),在Android平臺上面氧急，模式設(shè)置成'dialog',顯示彈出框的標(biāo)題
<View style={styles.container}>
<Text >
Picker選擇器實例
</Text>
<Picker
style={{width:200}}
selectedValue={this.state.language}
onValueChange={(value) => this.setState({language: value})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="javaScript" />
</Picker>
<Text>當(dāng)前選擇的是:{this.state.language}</Text>
</View>
Switch
-
View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式) -
disabled bool如果該值為true,用戶就無法點擊switch開關(guān)控件，默認為false -
onValueChange function方法毫深，當(dāng)該組件的狀態(tài)值發(fā)生變化的時候回調(diào)方法 -
value bool該開關(guān)的值吩坝，如果該值為true的時候，開關(guān)呈打開狀態(tài)哑蔫，默認為false
<View style={styles.container}>
<Text>
Swtich實例
</Text>
<Switch
onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
style={{marginBottom:10,marginTop:10}}
value={this.state.falseSwitchIsOn} />
<Switch
onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
value={this.state.trueSwitchIsOn} />
</View>
ProgressBar
ProgressViewIOS-
progress number當(dāng)前的進度值（0到1之間）钉寝。 -
progressImage Image.propTypes.source一個可以拉伸的圖片，用于顯示進度條闸迷。 -
progressTintColor string進度條本身染上的顏色嵌纲。 -
progressViewStyle enum('default', 'bar')進度條的樣式。 -
trackImage Image.propTypes.source一個可拉伸的圖片腥沽，用于顯示進度條后面的軌道逮走。 -
trackTintColor string進度條軌道染上的顏色。
<View style={styles.container}>
<ProgressViewIOS style={styles.progressView} progress={this.getProgress(0)}/>
<ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={this.getProgress(0.2)}/>
<ProgressViewIOS style={styles.progressView} progressTintColor="red" progress={this.getProgress(0.4)}/>
<ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={this.getProgress(0.6)}/>
<ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={this.getProgress(0.8)}/>
</View>
componentDidMount() {
this.updateProgress();
}
updateProgress() {
var progress = this.state.progress + 0.01;
this.setState({ progress });
this.timer = requestAnimationFrame(() => this.updateProgress());
}
getProgress(offset) {
console.log('11');
var progress = this.state.progress + offset;
return Math.sin(progress % Math.PI) % 1;
}
ProgressBarAndroidcolor string進度條的顏色今阳。indeterminate indeterminateType決定進度條是否要顯示一個不確定的進度师溅。注意這個在styleAttr是Horizontal的時候必須是false。progress number當(dāng)前的進度值（在0到1之間）酣栈。-
styleAttr STYLE_ATTRIBUTES進度條的樣式险胰。可取值有：HorizontalSmallLargeInverseSmallInverseLargeInverse
<View style={styles.container}>
<ProgressBarAndroid progress={this.state.progress} {...this.props} />
</View>
WebView
automaticallyAdjustContentInsets：是否自動調(diào)整內(nèi)部內(nèi)容bounces（IOS）：回彈效果 如果為false矿筝，則內(nèi)容拉到底部或頭部不回彈降允，默認為truedomStorageEnabled(Android)：僅限Android平臺泪喊。指定是否開啟DOM本地存儲javaScriptEnabled：僅限Android平臺夺英。iOS平臺JavaScript是默認開啟的contentInset：內(nèi)部內(nèi)容偏移值 該值為一個JavaScript對象{top:number,left:number,bottom:number,right:number}source:{{uri:'網(wǎng)址'}}在WebView中載入一段靜態(tài)的html代碼或是一個url（還可以附帶一些header選項）{{html:'html代碼塊'}}injectedJavaScript:注入的js代碼肩祥，其值為字符串整份，如果加上了該屬性寇荧，就會在webview里面執(zhí)行js代碼（在網(wǎng)頁加載之前注入）mediaPlaybackRequiresUserAction：設(shè)置頁面中的HTML5音視頻是否需要在用戶點擊后再開始播放授滓。默認值為falseonNavigationStateChange：監(jiān)聽導(dǎo)航狀態(tài)變化的函數(shù)（當(dāng)發(fā)現(xiàn)瀏覽器地址改變時假勿，觸發(fā)事件）renderError：監(jiān)聽渲染頁面出錯的函數(shù)startInLoadingState：是否開啟頁面加載的狀態(tài)renderLoading:webview組件正在渲染頁面時觸發(fā)的函數(shù)怯伊，需要同startInLoadingState一起使用琳轿，當(dāng)startInLoadingState為true時該函數(shù)才起作用scrollEnabled（IOS）：表示webview里面頁面是否能滾動，如果其值為true則可以滾動，否則禁止?jié)L動scalesPageToFit：按照頁面比例和內(nèi)容寬高比例自動縮放內(nèi)容
ListView
- 列表
<ListView
dataSource={this.dataSource.cloneWithRows(this.state.dataArr)}
renderRow={this.renderRow} //設(shè)置cell
style={{width:screenWidth}}
onEndReached={ this._toEnd }
onEndReachedThreshold={20}
renderFooter={ this._renderFooter }
enableEmptySections = {true}
refreshControl={
<RefreshControl
refreshing={this.state.isRefresh}
onRefresh={this._onRefresh}
tintColor="gray"
title="Loading..."
titleColor="gray"
colors={['#ff0000', '#00ff00', '#0000ff']}
progressBackgroundColor="#ffff00"
/>}
/>
- 卡片
<ListView //創(chuàng)建ListView
dataSource={this.dataSource.cloneWithRows(this.state.car)} //設(shè)置數(shù)據(jù)源
renderRow={this.renderRow} //設(shè)置cell
contentContainerStyle={styles.listViewStyle}//設(shè)置cell的樣式
onEndReached={ this._toEnd }
onEndReachedThreshold={10}
renderFooter={ this._renderFooter }
enableEmptySections = {true}
removeClippedSubviews={false}
refreshControl={
<RefreshControl
refreshing={this.isRefreshing}
onRefresh={this._onRefresh}
tintColor="gray"
title="Loading..."
titleColor="gray"
colors={['#ff0000', '#00ff00', '#0000ff']}
progressBackgroundColor="#ffff00"
/>}
/>
- 分組
render(){
const { brand} = this.props;
var Arr = brand ,
sectionIDs =[],//所有區(qū)ID的數(shù)組
rowIDs =[];//行ID數(shù)組
for (let i in brand ) {
sectionIDs.push(i);
rowIDs.push(brand[i])
}
return(
<ListView//創(chuàng)建表崭篡，并設(shè)置返回section和cell的方法
dataSource={this.dataSource.cloneWithRowsAndSections(Arr,sectionIDs,rowIDs)}
renderRow={this.renderRow}
renderSectionHeader={this.renderSectionHeader}
renderHeader={this.renderHeader }
/>
)
}
