React Native 基礎組件詳解＜一＞

一、Text組件

1）numberOfLines：顯示行數
2）ellipsizeMode：超出隱藏的位置 clip->裁掉 head/middle/ tail->點的位置
3）selectable: 是否可以選中
4）selectionColor：選中后的顏色
5）allowFontScaling: 跟隨系統字體大小變化

export default () => {return (<View style={styles.root}><Text style={styles.txt}numberOfLines={2}ellipsizeMode="tail">我是基礎組件Text我是基礎組件Text我是基礎組件Text</Text><Text style={styles.txt}selectable={true}selectionColor="yellow">我是基礎組件Text2</Text><Text style={styles.txt}onPress={() => {console.log('我點')}}onLongPress={() => {console.log('我長按')}}>我是可以點擊的基礎組件Text3</Text></View>);
}

在這里插入圖片描述

二、Image組件

1）source：圖片源注意：本地和遠程圖片的區別
2）defaultSource：占位圖片
3）resizeMode：縮放模式 content/center/cover/repeat/stretch
4）blurRadius：模糊
5）tintColor：用于改變圖標顏色（重要）

<Imagestyle={styles.img} source={iconSetting} // 本地圖片resizeMode='contain'blurRadius={2} /><Image style={styles.img} defaultSource={iconSetting} // 網絡圖沒有加載出來的占位source={{uri: imageUri}} /> // 網絡圖片

在這里插入圖片描述

<Imagestyle={styles.img2} source={iconSetting} />// ...
img2: {tintColor: 'red'}

在這里插入圖片描述

三、ImageBackground組件

View和Image的結合
1）style：容器的樣式
2）imageStyle：背景圖的樣式

<ImageBackgroundstyle={styles.card}imageStyle={styles.bg}source={cardBg}><Text style={styles.txt}>我是內容</Text>
</ImageBackground>// ...
card: {width: '100%',height: 150,flexDirection: 'row',alignItems: 'center',
},
bg: {opacity: .8,borderRadius: 12,
},

在這里插入圖片描述

四、TextInput組件

1）自動聚焦：autoFocus = true 或者ref.focus()
2）自動失焦：blurOnSubmit = true 或者ref.blur()
3）defaultValue：默認內容
4）editable：是否可以輸入 false是不能輸入
5）keyboardType：鍵盤類型 number-pad(數字)
6）returnKeyType：確定鍵 done/go/next/send/search
7）maxLength：最大長度
8）multiline：是否允許多行
9）numberOfLines：顯示的行數
10）selection：選中內容 {{start: 0 , end: 3}} 值是index
11）selectionColor：選中的顏色
12）selectTextOnFocus：第一次手動聚焦時，是否選中全部內容
13）secureTextEntry：是否密碼模式，不可與multiline=true同用

<TextInputref={inputRef}style={styles.input}// autoFocus={true}blurOnSubmit={true}caretHidden={false}defaultValue="我是默認的內容"editable={true}keyboardType='number-pad'returnKeyType='search'// maxLength={11}// multiline={true}// numberOfLines={2}onFocus={() => {}}onBlur={() => {}}onChange={(event) => {console.log(event.nativeEvent);}}onChangeText={(text) => {console.log(text);}}// selection={{start: 0, end: 3}}selectionColor='red'selectTextOnFocus={true}secureTextEntry={true}/>// ...
input: {width: '100%',height: 50,backgroundColor: '#ccc',fontSize: 24,color: '#000',fontWeight: 'bold',},

五、TouchableOpacity組件 — 點擊組件

activeOpacity：點擊時不透明度的變化

<TouchableOpacitystyle={styles.button}activeOpacity={0.5}// x ~ 1不透明度變化范圍onPress={() => {console.log('點擊 ...');}}onLongPress={() => {console.log('長按 ...');}}delayLongPress={1000} // 長按規定時間onPressIn={() => {console.log('按下去 ...');}}onPressOut={() => {console.log('抬起來 ...');}}><Text style={styles.txt}>按鈕</Text></TouchableOpacity>

六、TouchableHighlight組件 – 點擊組件

underlayColor：按下去時高亮顏色
注意：1）只能有一個子節點
2）activeOpacity單個使用沒有效果，必須和onPress一起用點擊時才有不透明過渡效果

<TouchableHighlightstyle={styles.button}activeOpacity={0.8}onPress={() => {console.log('onPress ...');}}underlayColor="#00bcd4"><Text style={styles.txt}>按鈕</Text></TouchableHighlight>

七、TouchableWithoutFeedback組件 – 幾乎不用

注意：只支持一個子節點，而且自身不支持樣式

<TouchableWithoutFeedback><Viewstyle={styles.button}><Text style={styles.txt}>按鈕</Text></View></TouchableWithoutFeedback>

八、Button組件

1）title：必須
2）color：按鈕顏色，不設置默認為藍色
3）disabled：是否置灰
注意：不可定制樣式

<Buttontitle='按 鈕'// color={"green"}// disabled={true}onPress={() => {}}
/>

在這里插入圖片描述

九、ScrollView組件

1）contentContainerStyle：包裹內容的容器的樣式
2）keyboardDismissMode：當鍵盤拉起時，滾動鍵盤是否消失 on-drag(消失)
3）keyboardShouldPersistTaps：當鍵盤拉起時，點擊滾動區域鍵盤是否消失 never(消失)/always(不消失)/handled(消失)
！！！never和handled的區別：**鍵盤和Button同時存在的情況下：
never：點擊按鈕，鍵盤收起，但是Button的onPress沒有直接執行
handled：點擊按鈕，鍵盤不會收起，Button的onPress直接執行，點擊滾動區域的非按鈕部分，鍵盤收起

4）overScrollMode：滾動到頭，能否拉動 never(不能)/always(能)
5）scrollEnabled：是否可以滾動
6）contentOffset：初始默認滾動的位置 {y: 100}
7）showsVerticalScrollIndicator：滾動時，是否顯示縱向滾動條
8）stickyHeaderIndices：第幾個元素吸頂

9）指定滾動距離：ref.scrollTo({y: xxx})
10）指定滾動到結尾：ref.scrollToEnd()

<ScrollViewref={scrollViewRef}style={styles.root}contentContainerStyle={styles.containerStyle}keyboardDismissMode='on-drag'keyboardShouldPersistTaps='handled'onMomentumScrollBegin={() => {// console.log('滾動開始 ...')}}onMomentumScrollEnd={() => {// console.log('滾動結束 ...')}}onScroll={(event) => {// event.nativeEvent.contentOffset.y：滾動距離// console.log(event.nativeEvent.contentOffset.y);}}scrollEventThrottle={16} // ios, 沒隔多少毫秒回調onScrolloverScrollMode='always' scrollEnabled={true}contentOffset={{ y: 100 }} // 初始滾動位置showsVerticalScrollIndicator={false}stickyHeaderIndices={[1]} // 第幾個吸頂
>// 內容
</ScrollView>

11）pagingEnabled：是否整頁滾動

<ScrollView style={{ width: '100%', height: 200 }} horizontal={true} pagingEnabled={true}><View style={{ width, height: 200, backgroundColor: 'red' }} /><View style={{ width, height: 200, backgroundColor: 'blue' }} /><View style={{ width, height: 200, backgroundColor: 'green' }} /></ScrollView>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/87907.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/87907.shtml
英文地址，請注明出處：http://en.pswp.cn/web/87907.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！