react-native的常用組件及api

1. 容器組件 類似于section或div View

可用于flex布局使用

<View
  style={{
    flexDirection: "row",
    height: 100,
    padding: 20
  }}
>
  <View style={{ backgroundColor: "blue", flex: 0.3 }} />
  <Text>Hello World!</Text>
</View>
2.顯示文本內(nèi)容類似于p標(biāo)簽 Text

必須把文本節(jié)點(diǎn)放到Text中，否則會報(bào)錯(cuò)，Text組件內(nèi)的子組件不支持flex布局

<Text 
  numberOfLines={2}     // 超過2行會截取
  ellipsizeMode="tail"  // 超出的顯示省略號 
                        // head-文本前省略/ middle-文本中間省略/ tail-文本結(jié)尾省略/ clip-不顯示省略號
>
  Text文本
</Text>
3.顯示圖片的容器組件 Image

Android 是不支持 GIF 和 WebP 格式,你需要在android/app/build.gradle文件中根據(jù)需要手動添加

dependencies {
  // 如果你需要支持Android4.0(API level 14)之前的版本
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'
  // 如果你需要支持GIF動圖
  implementation 'com.facebook.fresco:animated-gif:2.0.0'
  // 如果你需要支持WebP格式，包括WebP動圖
  implementation 'com.facebook.fresco:animated-webp:2.1.0'
  implementation 'com.facebook.fresco:webpsupport:2.0.0'
  // 如果只需要支持WebP格式而不需要動圖
  implementation 'com.facebook.fresco:webpsupport:2.0.0'
}

網(wǎng)絡(luò)和 base64 數(shù)據(jù)的圖片需要手動指定尺寸

      <Image
        style={{width: 50, height: 50,}}
        source={require('本地圖片地址')}
      />
      <Image
        style={{width: 50, height: 50,}}
        source={{uri: 網(wǎng)絡(luò)圖片地址或uri:base64,}}
        resizeMode='cover' // 當(dāng)組件尺寸和圖片尺寸不成比例時(shí)如何縮放圖片
                           // cover- 保持寬高比，組件中不留空白 / contain- 保持寬高比，留空白 / stretch- 拉伸圖片至鋪滿 /repeat- 不縮放，平鋪 /center- 不縮放，放中間
      />
安卓有坑。。。

在安卓中，如果使用圖片大小遠(yuǎn)大于Image的圖片會觸發(fā)內(nèi)存泄漏，只需要設(shè)置 Image 組件的 resizeMethod 屬性為 resize 即可

4.輸入框 TextInput

提供了多種特性的配置，譬如自動完成、自動大小寫、占位文字，以及多種不同的鍵盤類型（如純數(shù)字鍵盤）等等
能夠配置出類似textarea、password，其他的多選、單選、下拉框等input類型需要引入第三方插件http://www.itdecent.cn/p/a7609fce8da4

<TextInput
      placeholder="placeholder"
      placeholderTextColor="#ccc"
      onChangeText={text => onChangeText(text)}
      multiline // 多行相當(dāng)于textarea 同時(shí)需要設(shè)置高度
      numberOfLines={4} // 配合 multiline使用
      value={value}
      editable={false} // 是否可編輯
      keyboardType="number-pad" // 彈出鍵盤的類型
                                // number-pad ，decimal-pad，numeric ，phone-pad -數(shù)字鍵盤/email-address -英文鍵盤
      secureTextEntry={true} // 密碼輸入框使用 不能和multiline同時(shí)使用
/>
5.滾動視圖 ScrollView

ScrollView 實(shí)際上所做的就是將一系列不確定高度的子組件裝進(jìn)一個(gè)確定高度的容器（通過滾動操作）
一般來說我們會給 ScrollView 設(shè)置flex: 1以使其自動填充父容器的空余空間

    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        </Text>
      </ScrollView>
    </SafeAreaView>
  • ScrollView對比FlatList和SectionList
    1. ScrollView可以包裹所有的組件，，會把包裹的所有的組件一次性的渲染出來，性能上會有浪費(fèi)。一般用作設(shè)置橫向滾動或頁面外層的嵌套。
    horizontal // 橫向滾動
showsHorizontalScrollIndicator={false} // 隱藏橫向滾動的滾動條
    1. FlatList渲染一個(gè)列表，內(nèi)部數(shù)據(jù)循環(huán)展示，會惰性渲染子元素，性能較高，一般的長列表會使用FlatList實(shí)現(xiàn)，刷新加載等功能。
    2. SectionList跟FlatList比，可以對需要渲染的列表進(jìn)行分組

Virtualized List 放在 ScrollView 中，ScrollView 是要全部渲染的，那么 Virtualized List 就計(jì)算不出來哪些 Cell 目前顯示在屏幕上，會渲染所有的 Cell，那么它的優(yōu)勢就顯現(xiàn)不出來了會報(bào)警告，所以盡量不要用ScrollView嵌套FlatList和SectionList
解釋為什么不能嵌套https://blog.csdn.net/gang544043963/article/details/106525516

此處有坑。。。。

ScrollView作為FlatList的父組件的時(shí)候，實(shí)現(xiàn)上拉加載更多使用onEndReached會無限加載，可以在ScrollView上監(jiān)聽onscroll事件觸發(fā)加載更多或者不再用ScrollView把ScrollView中的其他內(nèi)容放到FlatList 的ListHeaderComponent屬性中。相見下方FlatList介紹使用。

6.CSS 樣式表 StyleSheet 
<View style={styles.container}>
    <Text style={styles.title}>React Native</Text>
  </View>
const styles = StyleSheet.create({ // 創(chuàng)建一個(gè)css樣式表
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#eaeaea"
  },
  title:{
    marginTop: 16,
  }
}
StyleSheet.compose(styles1.container, styles2.title); // 合并兩個(gè)樣式表
StyleSheet.flatten([page.text,typography.header]); // 拍平并組合成一個(gè)樣式
7.按鈕 Button

一般使用TouchableHighlight或者TouchableOpacity代替

<Button
  title="Left button"  // 文本
  onPress={this.click()} // 點(diǎn)擊事件
  color="#f194ff"http:// 文本的顏色(iOS)，或是按鈕的背景色(Android)
  disabled // 禁用
/>
8.安全可視區(qū) SafeAreaView

主要針對劉海屏，使用SafeAreaView包裹后，不會在劉海位置渲染頁面，以免信息展示不全。
ScrollView的contentInsetAdjustmentBehavior="automatic"也有同樣作用,但是滾動時(shí)會失效

<SafeAreaView style={styles.container}>
      <Text>Page content</Text>
 </SafeAreaView>
9.點(diǎn)擊高亮和點(diǎn)擊透明TouchableHighlight和TouchableOpacity 
<TouchableHighlight
  style={{ borderRadius: 30 }}
  underlayColor={disabled ? '#D4D7DC' : '#005fbe'}
  onPress={handleSubmitClick}
>
  <Text
    style={{ ...style.submitButtonText, ...(disabled ? style.buttonDisabled : {}) }}
  >
  提 交
  </Text>
</TouchableHighlight>
10.FlatList實(shí)現(xiàn)上拉加載更多
<FlatList
  data={dataArray}
  renderItem={(data) => _renderItem(data)}
  keyExtractor={(index) => index}
  scrollEnabled={false}
  ListFooterComponent={() => genIndicator()}
  onEndReachedThreshold={0.5} // 距離內(nèi)容最底部還有多遠(yuǎn)時(shí)觸發(fā)onEndReached回調(diào)
  onEndReached={() => {
    loadData();
  }}
/>
//如需ScrollView嵌套FlatList滾動上拉加載更多
const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
  const paddingToBottom = layoutMeasurement.height * 0.2;
  return (layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom );
};
 <ScrollView
  contentInsetAdjustmentBehavior="automatic"
  onScroll={({nativeEvent}) => {
    if (isCloseToBottom(nativeEvent)) {
      loadData();
    }
  }}
  style={styles.scrollView}>
  <Image
    style={styles.stretch}
    source={{
      uri: 'https://reactnative.dev/img/tiny_logo.png',
    }}
  />
  <View>
    <FlatList
      data={dataArray}
      renderItem={(data) => _renderItem(data)}
      keyExtractor={(index) => index}
      scrollEnabled={false}
      ListFooterComponent={() => genIndicator()}
    />
  </View>          
</ScrollView>
// 以下代碼可以取代上邊代碼
<FlatList
  data={dataArray}
  renderItem={(data) => _renderItem(data)}
  keyExtractor={(index) => index}
  scrollEnabled={false}
  ListHeaderComponent={()=><Header/>}// ScrollView中上邊的組件放在ListHeaderComponent中
  ListFooterComponent={() => genIndicator()}
  onEndReachedThreshold={0.5} // 距離內(nèi)容最底部還有多遠(yuǎn)時(shí)觸發(fā)onEndReached回調(diào)
  onEndReached={() => {
    loadData();
  }}
/>
11.其他
image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容