前言
眼看很多公司都開始嘗試使用ReactNative,達到跨平臺開發，最近也寫了很多文章，希望讓更多想了解的同學快速上手ReactNative.
如果喜歡我的文章，可以關注我微博:袁崢Seemygo
ReactNative之基本組件
一、View
- View組件在RN開發中是最常用的
- 一般常用于容器，往里面添加子控件,任何子組件都可以，View里面也可以在放View.
- 沒有點擊事件，不能監聽點擊。
二、TouchableOpacity
- TouchableOpacity點擊控件
- 如果想讓一個沒有點擊事件的組件，能點擊，就需要在外層包裝一個TouchableOpacity，這個View,就能點擊了。
- 一個View,被TouchableOpacity包裝后，點擊這個View,就會有透明效果，這個效果可以通過
activeOpacity屬性調整 -
activeOpacity:不透明度，0~1，1表示不透明，點擊就沒透明效果了。 - 注意：TouchableOpacity默認點擊區域，就是所有子控件的區域,因為默認一個組件的尺寸由子控件絕對，因此TouchableOpacity也是一樣。
- 使用
<TouchableOpacity activeOpacity={0.7}>
<View style={styles.childSytle}>
</View>
</TouchableOpacity>
2.1 如何監聽TouchableOpacity點擊
- 注意：onPress與onPressIn，onPressOut，有沖突，不要同時實現
onLongPress function ：長按的時候調用
onPress function ：點擊的時候調用
onPressIn function ：手指按下的時候調用
onPressOut function ：手指抬起的時候調用
- 使用
2.2 disabled屬性
- 如果設為true，則禁止此組件的一切交互
- 通過disabled，可以控制一個被TouchableOpacity包裝的組件什么時候能點擊。
Text
- Text:用于展示一段文字
- 常用屬性：
numberOfLines:最大行數，超出最大行數，就不會完全顯示，超出部分顯示...
selectable:決定用戶是否可以長按選擇文本，以便復制和粘貼,默認false
suppressHighlighting:默認情況下，文本被按下時會有一個灰色的陰影，如果想取消就設置為true
-
監聽文字點擊
- onPress
常用樣式屬性
color：字體顏色
fontSize:字體
fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
指定字體的粗細。大多數字體都支持'normal'和'bold'值。并非所有字體都支持所有的數字值。如果某個值不支持，則會自動選擇最接近的值。
lineHeight：行高
textAlign enum('auto', 'left', 'right', 'center', 'justify')
指定文本的對齊方式。其中'justify'值僅iOS支持，在Android上會變為left
- 使用
<View style={styles.mainViewStyle}>
<Text style={styles.textStyle}
numberOfLines={1}
selectable={true}
onPress={()=>{alert('點擊文字')}}
>
文本
</Text>
</View>
Button
Button:按鈕,當一個文字想要點擊效果，可以使用按鈕
注意：Button沒有樣式，設置樣式無效，最大的弊端，開發中一般不使用，一般自定義按鈕，自己包裝一個Text用于按鈕.
常用屬性
color color :文本的顏色(iOS)，或是按鈕的背景色(Android)
disabled bool :設置為true時此按鈕將不可點擊
onPress function :用戶點擊此按鈕時所調用的處理函數
title string :按鈕內顯示的文本
- 使用
<View style={styles.mainViewStyle}>
<Button style={styles.buttonSytle} title="按鈕" color="red"/>
</View>
TextInput
- TextInput:文本輸入框
- 默認沒有邊框，需要自己添加borderWidth
- 常用屬性
autoFocus：自動獲取焦點,如果為true，在componentDidMount后會獲得焦點。默認值為false
blurOnSubmit:點擊鍵盤，右下角return,或者按回車的時候，是否自動退出鍵盤，true:是。注意：鍵盤必須是英文輸入鍵盤，數字鍵盤無效.
editable:文本框是否可以編輯，默認值為true，如果為false，文本框是不可編輯的
keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 鍵盤類型
maxLength:最大字符數，顯示輸入文本長度
multiline:是否是多行輸入框，默認文本輸入框只能一行，true,就能多行輸入
placeholder:占位文字
placeholderTextColor：占位字符串顯示的文字顏色
returnKeyType enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') #：決定鍵盤右下角按鈕顯示的內容
secureTextEntry：是否安全輸入,注意：多行無效果
selectionColor:設置光標顏色
clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') :是否要在文本框右側顯示“清除”按鈕
clearTextOnFocus:每次重新輸入文本框，是否清空之前的文本
enablesReturnKeyAutomatically:如果為true，鍵盤會在文本框內沒有文字的時候禁用確認按鈕。默認值為false
- 常用方法
clear() :清空輸入框的內容。
- 監聽文本框事件
onBlur:監聽文本框失去焦點
onChange：當文本框內容變化時調用此回調函數
onChangeText:當文本框內容變化時調用此回調函數。改變后的文字內容會作為參數傳遞
onEndEditing:當文本輸入結束后調用此回調函數
onFocus:當文本框獲得焦點的時候調用此回調函數
onSubmitEditing:此回調函數當軟鍵盤的確定/提交按鈕被按下的時候調用此函數。如果multiline={true}，此屬性不可用
onKeyPress:當一個鍵被按下的時候調用此回調。傳遞給回調函數的參數為{ nativeEvent: { key: keyValue } }，其中keyValue即為被按下的鍵。會在onChange之前調用
- 使用
<View style={styles.mainViewStyle}>
<TextInput placeholder={'占位文字'}
style={styles.textStyle}
//multiline={true}
clearButtonMode="always"
secureTextEntry={true}
autoFocus={true}
blurOnSubmit={true}
selectionColor="red"
clearTextOnFocus="true"
onBlur={()=>{
console.log('文本框失去焦點');
}}
onChangeText={(text)=>{
console.log('文字改變'+text)
}}
onEndEditing={()=>{
console.log('文本框結束編輯');
}}
onFocus={()=>{
console.log('獲取焦點');
}}
onSubmitEditing={()=>{
console.log('點擊提交按鈕');
}}
/>
</View>
ReactNative之基本組件
一、View
- View組件在RN開發中是最常用的
- 一般常用于容器，往里面添加子控件,任何子組件都可以，View里面也可以在放View.
- 沒有點擊事件，不能監聽點擊。
二、TouchableOpacity
- TouchableOpacity點擊控件
- 如果想讓一個沒有點擊事件的組件，能點擊，就需要在外層包裝一個TouchableOpacity，這個View,就能點擊了。
- 一個View,被TouchableOpacity包裝后，點擊這個View,就會有透明效果，這個效果可以通過
activeOpacity屬性調整 -
activeOpacity:不透明度，0~1，1表示不透明，點擊就沒透明效果了。 - 注意：TouchableOpacity默認點擊區域，就是所有子控件的區域,因為默認一個組件的尺寸由子控件絕對，因此TouchableOpacity也是一樣。
- 使用
<TouchableOpacity activeOpacity={0.7}>
<View style={styles.childSytle}>
</View>
</TouchableOpacity>
2.1 如何監聽TouchableOpacity點擊
- 注意：onPress與onPressIn，onPressOut，有沖突，不要同時實現
onLongPress function ：長按的時候調用
onPress function ：點擊的時候調用
onPressIn function ：手指按下的時候調用
onPressOut function ：手指抬起的時候調用
- 使用
2.2 disabled屬性
- 如果設為true，則禁止此組件的一切交互
- 通過disabled，可以控制一個被TouchableOpacity包裝的組件什么時候能點擊。
Text
- Text:用于展示一段文字
- 常用屬性：
numberOfLines:最大行數，超出最大行數，就不會完全顯示，超出部分顯示...
selectable:決定用戶是否可以長按選擇文本，以便復制和粘貼,默認false
-
監聽文字點擊
- onPress
常用樣式屬性
color：字體顏色
fontSize:字體
fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
指定字體的粗細。大多數字體都支持'normal'和'bold'值。并非所有字體都支持所有的數字值。如果某個值不支持，則會自動選擇最接近的值。
lineHeight：行高
textAlign enum('auto', 'left', 'right', 'center', 'justify')
指定文本的對齊方式。其中'justify'值僅iOS支持，在Android上會變為left
- 使用
<View style={styles.mainViewStyle}>
<Text style={styles.textStyle}
numberOfLines={1}
selectable={true}
onPress={()=>{alert('點擊文字')}}
>
文本
</Text>
</View>
Button
Button:按鈕,當一個文字想要點擊效果，可以使用按鈕
注意：Button沒有樣式，設置樣式無效，最大的弊端，開發中一般不使用，一般自定義按鈕，自己包裝一個Text用于按鈕.
常用屬性
color color :文本的顏色(iOS)，或是按鈕的背景色(Android)
disabled bool :設置為true時此按鈕將不可點擊
onPress function :用戶點擊此按鈕時所調用的處理函數
title string :按鈕內顯示的文本
- 使用
<View style={styles.mainViewStyle}>
<Button style={styles.buttonSytle} title="按鈕" color="red"/>
</View>
TextInput
- TextInput:文本輸入框
- 默認沒有邊框，需要自己添加borderWidth
- 常用屬性
autoFocus：自動獲取焦點,如果為true，在componentDidMount后會獲得焦點。默認值為false
blurOnSubmit:點擊鍵盤，右下角return,或者按回車的時候，是否自動退出鍵盤，true:是。注意：鍵盤必須是英文輸入鍵盤，數字鍵盤無效.
editable:文本框是否可以編輯，默認值為true，如果為false，文本框是不可編輯的
keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 鍵盤類型
maxLength:最大字符數，顯示輸入文本長度
multiline:是否是多行輸入框，默認文本輸入框只能一行，true,就能多行輸入
placeholder:占位文字
placeholderTextColor：占位字符串顯示的文字顏色
returnKeyType enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') #：決定鍵盤右下角按鈕顯示的內容
secureTextEntry：是否安全輸入,注意：多行無效果
selectionColor:設置光標顏色
clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') :是否要在文本框右側顯示“清除”按鈕
clearTextOnFocus:每次重新輸入文本框，是否清空之前的文本
enablesReturnKeyAutomatically:如果為true，鍵盤會在文本框內沒有文字的時候禁用確認按鈕。默認值為false
- 監聽文本框事件
onBlur:監聽文本框失去焦點
onChange：當文本框內容變化時調用此回調函數
onChangeText:當文本框內容變化時調用此回調函數。改變后的文字內容會作為參數傳遞
onEndEditing:當文本輸入結束后調用此回調函數
onFocus:當文本框獲得焦點的時候調用此回調函數
onSubmitEditing:此回調函數當軟鍵盤的確定/提交按鈕被按下的時候調用此函數。如果multiline={true}，此屬性不可用
onKeyPress:當一個鍵被按下的時候調用此回調。傳遞給回調函數的參數為{ nativeEvent: { key: keyValue } }，其中keyValue即為被按下的鍵。會在onChange之前調用
- 使用
<View style={styles.mainViewStyle}>
<TextInput placeholder={'占位文字'}
style={styles.textStyle}
//multiline={true}
clearButtonMode="always"
secureTextEntry={true}
autoFocus={true}
blurOnSubmit={true}
selectionColor="red"
clearTextOnFocus="true"
onBlur={()=>{
console.log('文本框失去焦點');
}}
onChangeText={(text)=>{
console.log('文字改變'+text)
}}
onEndEditing={()=>{
console.log('文本框結束編輯');
}}
onFocus={()=>{
console.log('獲取焦點');
}}
onSubmitEditing={()=>{
console.log('點擊提交按鈕');
}}
/>
</View>
Image
-
Image:用于加載圖片
- 圖片可以是本地圖片也可以是網絡中的圖片
Image常用屬性
source {uri: string}, number : 設置Image圖片資源
blurRadius number：讓圖片模糊
defaultSource {uri: string, width: number, height: number, scale: number}, number
占位圖片，在讀取圖片時默認顯示的加載提示圖片
resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center')
決定圖片尺寸大小。
cover: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大于等于容器視圖的尺寸（如果容器有padding內襯的話，則相應減去）。譯注：這樣圖片完全覆蓋甚至超出容器，容器中不留任何空白。
contain: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小于等于容器視圖的尺寸（如果容器有padding內襯的話，則相應減去）。譯注：這樣圖片完全被包裹在容器中，容器中可能留有空白
stretch: 拉伸圖片且不維持寬高比，直到寬高都剛好填滿容器。
repeat: 重復平鋪圖片直到填滿容器。圖片會維持原始尺寸。僅iOS可用。
center: 居中不拉伸。
- 本地圖片存放在哪
- 1.可以直接存放在RN項目中
存放RN.png
* 2.可以存放到iOS項目中，打開iOS項目，存入到Images.xcassets文件中
存放iOS項目中.png
* 3.可以存放到安卓項目中,必須放入drawable-xxhdpi文件中
* 注意安卓的圖片名稱，不能以數字開頭，也不能有大寫字母
* 自己生成drawable-xxhdpi文件夾，把圖片放進去，然后把文件夾drawable-xxhdpi存放到安卓文件中res文件夾中
存放安卓圖片.png
- 如何加載本地圖片
- RN中加載資源:require(文件路徑),用于加載RN中的資源，不管是圖片，還是json都是一樣的
- uri:指定一個資源路徑，就會自動加載
- uri加載注意：通過uri加載資源，必須設置圖片尺寸，否則不顯示
- 如果網絡加載http圖片，iOS默認不支持，需要做配置
iOS加載http圖片.png
<View style={styles.mainViewStyle}>
<Text>1.加載RN項目的資源</Text>
<Image source={require('./Img/chaolan.jpeg')} style={styles.imageSytle}/>
<Text>2.加載App中的資源</Text>
<Image source={{uri:'wukong'}} style={styles.imageSytle}/>
<Text>3.加載網絡中的資源</Text>
{/*https*/}
{/*<Image source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493026646896&di=b77d170bbb31db812fced6d3b2f24499&imgtype=0&src=http%3A%2F%2Fcnews.chinadaily.com.cn%2Fimg%2Fsite1%2F20170410%2F448a5bd66cd11a556e112b.jpeg'}} style={styles.imageSytle}/>*/}
{/*http*/}
<Image source={{uri:'http://img01.youxiaoshuo.com/portal/201703/21/083647y43dl1j14s8s3g99.jpg'}} style={styles.imageSytle}/>
</View>
- 監聽圖片加載方法
onLoad:圖片加載完成時調用此函數
onLoadStart：圖片加載開始時調用
onLoadEnd：加載結束后，不論成功還是失敗，調用此回調函數
onError：當加載錯誤的時候調用此回調函數，參數為{nativeEvent: {error}}
onProgress：在加載過程中不斷調用，參數為{nativeEvent: {loaded, total}}
- Image類方法，通過類調用的方法，叫做類方法
static getSize(uri: string, success: (width: number, height: number) => void, failure: (error: any) => void)
在顯示圖片前獲取圖片的寬高(以像素為單位)。如果圖片地址不正確或下載失敗,此方法也會失敗。
一般在componentDidMount調用，先獲取圖片尺寸，然后在設置圖片尺寸。
要獲取圖片的尺寸,首先需要加載或下載圖片(同時會被緩存起來)。這意味著理論上你可以用這個方法來預加載圖片,雖然此方法并沒有針對這一用法進行優化,而且將來可能會換一些實現方案使得并不需要完整下載圖片即可獲取尺寸。所以更好的預加載方案是使用下面那個專門的預加載方法。
- 使用
constructor(props){
super(props)
Image.getSize('http://img01.youxiaoshuo.com/portal/201703/21/083647y43dl1j14s8s3g99.jpg',(width,height)=>{
console.log('獲取圖片尺寸')
console.log(width,height)
},(error,)=>{
})
}
render() {
return (
<View style={styles.mainViewStyle}>
<Text>1.加載RN項目的資源</Text>
<Image source={require('./Img/chaolan.jpeg')}
style={styles.imageSytle}
blurRadius={10}
/>
<Text>2.加載App中的資源</Text>
<Image source={{uri:'wukong'}} style={styles.imageSytle}/>
<Text>3.加載網絡中的資源</Text>
{/*https*/}
{/*<Image source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493026646896&di=b77d170bbb31db812fced6d3b2f24499&imgtype=0&src=http%3A%2F%2Fcnews.chinadaily.com.cn%2Fimg%2Fsite1%2F20170410%2F448a5bd66cd11a556e112b.jpeg'}} style={styles.imageSytle}/>*/}
{/*http*/}
<Image source={{uri:'http://img01.youxiaoshuo.com/portal/201703/21/083647y43dl1j14s8s3g99.jpg'}}
style={styles.imageSytle}
defaultSource={{uri:'wukong'}}
onLoad={()=>{
alert('圖片加載完成');
}}
onProgress={(e)=>{
console.log(e.nativeEvent);
}}
/>
</View>
);
}
