亚洲天堂精品久久网站,青青视频播放,久久久免费视频25

前言

眼看很多公司都開始嘗試使用ReactNative,達到跨平臺開發(fā)，最近也寫了很多文章，希望讓更多想了解的同學快速上手ReactNative.

如果喜歡我的文章，可以關注我微博:袁崢Seemygo

ReactNative之基本組件

一、View

View組件在RN開發(fā)中是最常用的
- 一般常用于容器，往里面添加子控件,任何子組件都可以，View里面也可以在放View.
- 沒有點擊事件，不能監(jiān)聽點擊。

二、TouchableOpacity

TouchableOpacity點擊控件
- 如果想讓一個沒有點擊事件的組件，能點擊，就需要在外層包裝一個TouchableOpacity，這個View,就能點擊了。
- 一個View,被TouchableOpacity包裝后，點擊這個View,就會有透明效果，這個效果可以通過activeOpacity屬性調整
- activeOpacity:不透明度，0~1，1表示不透明，點擊就沒透明效果了。
- 注意：TouchableOpacity默認點擊區(qū)域，就是所有子控件的區(qū)域,因為默認一個組件的尺寸由子控件絕對，因此TouchableOpacity也是一樣。
使用

<TouchableOpacity activeOpacity={0.7}>
  <View style={styles.childSytle}>
  </View>
</TouchableOpacity>

2.1 如何監(jiān)聽TouchableOpacity點擊

注意：onPress與onPressIn，onPressOut，有沖突，不要同時實現(xiàn)

onLongPress function ：長按的時候調用

onPress function ：點擊的時候調用

onPressIn function ：手指按下的時候調用

onPressOut function ：手指抬起的時候調用

使用

2.2 disabled屬性

如果設為true，則禁止此組件的一切交互
通過disabled，可以控制一個被TouchableOpacity包裝的組件什么時候能點擊。

Text

Text:用于展示一段文字
常用屬性：

numberOfLines:最大行數(shù)，超出最大行數(shù)，就不會完全顯示，超出部分顯示...
selectable:決定用戶是否可以長按選擇文本，以便復制和粘貼,默認false
suppressHighlighting:默認情況下，文本被按下時會有一個灰色的陰影，如果想取消就設置為true

監(jiān)聽文字點擊
- onPress
常用樣式屬性

color：字體顏色

fontSize:字體

fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
指定字體的粗細。大多數(shù)字體都支持'normal'和'bold'值。并非所有字體都支持所有的數(shù)字值。如果某個值不支持，則會自動選擇最接近的值。

lineHeight：行高

textAlign enum('auto', 'left', 'right', 'center', 'justify')
指定文本的對齊方式。其中'justify'值僅iOS支持，在Android上會變?yōu)閘eft

使用

            <View style={styles.mainViewStyle}>
                <Text style={styles.textStyle}
                      numberOfLines={1}
                      selectable={true}
                      onPress={()=>{alert('點擊文字')}}
                >
                    文本
                </Text>
            </View>

Button

Button:按鈕,當一個文字想要點擊效果，可以使用按鈕
注意：Button沒有樣式，設置樣式無效，最大的弊端，開發(fā)中一般不使用，一般自定義按鈕，自己包裝一個Text用于按鈕.
常用屬性

color color :文本的顏色(iOS)，或是按鈕的背景色(Android)

disabled bool :設置為true時此按鈕將不可點擊

onPress function :用戶點擊此按鈕時所調用的處理函數(shù)

title string :按鈕內顯示的文本

使用

 <View style={styles.mainViewStyle}>
                <Button style={styles.buttonSytle} title="按鈕" color="red"/>
 </View>

TextInput

TextInput:文本輸入框
- 默認沒有邊框，需要自己添加borderWidth
常用屬性

autoFocus：自動獲取焦點,如果為true，在componentDidMount后會獲得焦點。默認值為false

blurOnSubmit:點擊鍵盤，右下角return,或者按回車的時候，是否自動退出鍵盤，true:是。注意：鍵盤必須是英文輸入鍵盤，數(shù)字鍵盤無效.

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:最大字符數(shù)，顯示輸入文本長度

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() :清空輸入框的內容。

監(jiān)聽文本框事件

onBlur:監(jiān)聽文本框失去焦點
onChange：當文本框內容變化時調用此回調函數(shù)
onChangeText:當文本框內容變化時調用此回調函數(shù)。改變后的文字內容會作為參數(shù)傳遞
onEndEditing:當文本輸入結束后調用此回調函數(shù)
onFocus:當文本框獲得焦點的時候調用此回調函數(shù)
onSubmitEditing:此回調函數(shù)當軟鍵盤的確定/提交按鈕被按下的時候調用此函數(shù)。如果multiline={true}，此屬性不可用
onKeyPress:當一個鍵被按下的時候調用此回調。傳遞給回調函數(shù)的參數(shù)為{ 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開發(fā)中是最常用的
- 一般常用于容器，往里面添加子控件,任何子組件都可以，View里面也可以在放View.
- 沒有點擊事件，不能監(jiān)聽點擊。

二、TouchableOpacity

TouchableOpacity點擊控件
- 如果想讓一個沒有點擊事件的組件，能點擊，就需要在外層包裝一個TouchableOpacity，這個View,就能點擊了。
- 一個View,被TouchableOpacity包裝后，點擊這個View,就會有透明效果，這個效果可以通過activeOpacity屬性調整
- activeOpacity:不透明度，0~1，1表示不透明，點擊就沒透明效果了。
- 注意：TouchableOpacity默認點擊區(qū)域，就是所有子控件的區(qū)域,因為默認一個組件的尺寸由子控件絕對，因此TouchableOpacity也是一樣。
使用

<TouchableOpacity activeOpacity={0.7}>
  <View style={styles.childSytle}>
  </View>
</TouchableOpacity>

2.1 如何監(jiān)聽TouchableOpacity點擊

注意：onPress與onPressIn，onPressOut，有沖突，不要同時實現(xiàn)

onLongPress function ：長按的時候調用

onPress function ：點擊的時候調用

onPressIn function ：手指按下的時候調用

onPressOut function ：手指抬起的時候調用

使用

2.2 disabled屬性

如果設為true，則禁止此組件的一切交互
通過disabled，可以控制一個被TouchableOpacity包裝的組件什么時候能點擊。

Text

Text:用于展示一段文字
常用屬性：

numberOfLines:最大行數(shù)，超出最大行數(shù)，就不會完全顯示，超出部分顯示...
selectable:決定用戶是否可以長按選擇文本，以便復制和粘貼,默認false

監(jiān)聽文字點擊
- onPress
常用樣式屬性

color：字體顏色

fontSize:字體

fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
指定字體的粗細。大多數(shù)字體都支持'normal'和'bold'值。并非所有字體都支持所有的數(shù)字值。如果某個值不支持，則會自動選擇最接近的值。

lineHeight：行高

textAlign enum('auto', 'left', 'right', 'center', 'justify')
指定文本的對齊方式。其中'justify'值僅iOS支持，在Android上會變?yōu)閘eft

使用

            <View style={styles.mainViewStyle}>
                <Text style={styles.textStyle}
                      numberOfLines={1}
                      selectable={true}
                      onPress={()=>{alert('點擊文字')}}
                >
                    文本
                </Text>
            </View>

Button

Button:按鈕,當一個文字想要點擊效果，可以使用按鈕
注意：Button沒有樣式，設置樣式無效，最大的弊端，開發(fā)中一般不使用，一般自定義按鈕，自己包裝一個Text用于按鈕.
常用屬性

color color :文本的顏色(iOS)，或是按鈕的背景色(Android)

disabled bool :設置為true時此按鈕將不可點擊

onPress function :用戶點擊此按鈕時所調用的處理函數(shù)

title string :按鈕內顯示的文本

使用

 <View style={styles.mainViewStyle}>
                <Button style={styles.buttonSytle} title="按鈕" color="red"/>
 </View>

TextInput

TextInput:文本輸入框
- 默認沒有邊框，需要自己添加borderWidth
常用屬性

autoFocus：自動獲取焦點,如果為true，在componentDidMount后會獲得焦點。默認值為false

blurOnSubmit:點擊鍵盤，右下角return,或者按回車的時候，是否自動退出鍵盤，true:是。注意：鍵盤必須是英文輸入鍵盤，數(shù)字鍵盤無效.

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:最大字符數(shù)，顯示輸入文本長度

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

監(jiān)聽文本框事件

onBlur:監(jiān)聽文本框失去焦點
onChange：當文本框內容變化時調用此回調函數(shù)
onChangeText:當文本框內容變化時調用此回調函數(shù)。改變后的文字內容會作為參數(shù)傳遞
onEndEditing:當文本輸入結束后調用此回調函數(shù)
onFocus:當文本框獲得焦點的時候調用此回調函數(shù)
onSubmitEditing:此回調函數(shù)當軟鍵盤的確定/提交按鈕被按下的時候調用此函數(shù)。如果multiline={true}，此屬性不可用
onKeyPress:當一個鍵被按下的時候調用此回調。傳遞給回調函數(shù)的參數(shù)為{ 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:用于加載圖片
- 圖片可以是本地圖片也可以是網(wǎng)絡中的圖片
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文件中
      *    注意安卓的圖片名稱，不能以數(shù)字開頭，也不能有大寫字母
          *   自己生成drawable-xxhdpi文件夾，把圖片放進去，然后把文件夾drawable-xxhdpi存放到安卓文件中res文件夾中

存放安卓圖片.png

如何加載本地圖片
- RN中加載資源:require(文件路徑),用于加載RN中的資源，不管是圖片，還是json都是一樣的
- uri:指定一個資源路徑，就會自動加載
- uri加載注意：通過uri加載資源，必須設置圖片尺寸，否則不顯示
- 如果網(wǎng)絡加載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.加載網(wǎng)絡中的資源</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>

監(jiān)聽圖片加載方法

onLoad:圖片加載完成時調用此函數(shù)
onLoadStart：圖片加載開始時調用
onLoadEnd：加載結束后，不論成功還是失敗，調用此回調函數(shù)
onError：當加載錯誤的時候調用此回調函數(shù)，參數(shù)為{nativeEvent: {error}}
onProgress：在加載過程中不斷調用，參數(shù)為{nativeEvent: {loaded, total}}

Image類方法，通過類調用的方法，叫做類方法

static getSize(uri: string, success: (width: number, height: number) => void, failure: (error: any) => void) 

在顯示圖片前獲取圖片的寬高(以像素為單位)。如果圖片地址不正確或下載失敗,此方法也會失敗。

一般在componentDidMount調用，先獲取圖片尺寸，然后在設置圖片尺寸。

要獲取圖片的尺寸,首先需要加載或下載圖片(同時會被緩存起來)。這意味著理論上你可以用這個方法來預加載圖片,雖然此方法并沒有針對這一用法進行優(yōu)化,而且將來可能會換一些實現(xiàn)方案使得并不需要完整下載圖片即可獲取尺寸。所以更好的預加載方案是使用下面那個專門的預加載方法。

使用

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.加載網(wǎng)絡中的資源</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>

        );
    }

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

ReactNative之基本組件（七）

ReactNative之基本組件（七）

前言

ReactNative之基本組件

一、View

二、TouchableOpacity

2.1 如何監(jiān)聽TouchableOpacity點擊

2.2 disabled屬性

Text

Button

TextInput

ReactNative之基本組件

一、View

二、TouchableOpacity

2.1 如何監(jiān)聽TouchableOpacity點擊

2.2 disabled屬性

Text

Button

TextInput

Image

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

ReactNative之基本組件（七）

前言

ReactNative之基本組件

一、View

二、TouchableOpacity

2.1 如何監(jiān)聽TouchableOpacity點擊

2.2 disabled屬性

Text

Button

TextInput

ReactNative之基本組件

一、View

二、TouchableOpacity

2.1 如何監(jiān)聽TouchableOpacity點擊

2.2 disabled屬性

Text

Button

TextInput

Image

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

二、TouchableOpacity

一、View