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.显示文本内容类似于p标签 Text

必须把文本节点放到Text中，否则会报错，Text组件内的子组件不支持flex布局

<Text 
  numberOfLines={2}     // 超过2行会截取
  ellipsizeMode="tail"  // 超出的显示省略号 
                        // head-文本前省略/ middle-文本中间省略/ tail-文本结尾省略/ clip-不显示省略号
>
  Text文本
</Text>

3.显示图片的容器组件 Image

Android 是不支持 GIF 和 WebP 格式,你需要在android/app/build.gradle文件中根据需要手动添加

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'
}

网络和 base64 数据的图片需要手动指定尺寸

      <Image
        style={{width: 50, height: 50,}}
        source={require('本地图片地址')}
      />
      <Image
        style={{width: 50, height: 50,}}
        source={{uri: 网络图片地址或uri:base64,}}
        resizeMode='cover' // 当组件尺寸和图片尺寸不成比例时如何缩放图片
                           // cover- 保持宽高比，组件中不留空白 / contain- 保持宽高比，留空白 / stretch- 拉伸图片至铺满 /repeat- 不缩放，平铺 /center- 不缩放，放中间
      />

安卓有坑。。。

在安卓中，如果使用图片大小远大于Image的图片会触发内存泄漏，只需要设置 Image 组件的 resizeMethod 属性为 resize 即可

4.输入框 TextInput

提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等
能够配置出类似textarea、password，其他的多选、单选、下拉框等input类型需要引入第三方插件https://www.jianshu.com/p/a7609fce8da4

<TextInput
      placeholder="placeholder"
      placeholderTextColor="#ccc"
      onChangeText={text => onChangeText(text)}
      multiline // 多行相当于textarea 同时需要设置高度
      numberOfLines={4} // 配合 multiline使用
      value={value}
      editable={false} // 是否可编辑
      keyboardType="number-pad" // 弹出键盘的类型
                                // number-pad ，decimal-pad，numeric ，phone-pad -数字键盘/email-address -英文键盘
      secureTextEntry={true} // 密码输入框使用 不能和multiline同时使用
/>

5.滚动视图 ScrollView

ScrollView 实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）
一般来说我们会给 ScrollView 设置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可以包裹所有的组件，，会把包裹的所有的组件一次性的渲染出来，性能上会有浪费。一般用作设置横向滚动或页面外层的嵌套。

  horizontal // 横向滚动
  showsHorizontalScrollIndicator={false} // 隐藏横向滚动的滚动条
  

  2. FlatList渲染一个列表，内部数据循环展示，会惰性渲染子元素，性能较高，一般的长列表会使用FlatList实现，刷新加载等功能。
  3. SectionList跟FlatList比，可以对需要渲染的列表进行分组

Virtualized List 放在 ScrollView 中，ScrollView 是要全部渲染的，那么 Virtualized List 就计算不出来哪些 Cell 目前显示在屏幕上，会渲染所有的 Cell，那么它的优势就显现不出来了会报警告，所以尽量不要用ScrollView嵌套FlatList和SectionList
解释为什么不能嵌套https://blog.csdn.net/gang544043963/article/details/106525516

此处有坑。。。。

ScrollView作为FlatList的父组件的时候，实现上拉加载更多使用onEndReached会无限加载，可以在ScrollView上监听onscroll事件触发加载更多或者不再用ScrollView把ScrollView中的其他内容放到FlatList 的ListHeaderComponent属性中。相见下方FlatList介绍使用。

6.CSS 样式表 StyleSheet

<View style={styles.container}>
    <Text style={styles.title}>React Native</Text>
  </View>
const styles = StyleSheet.create({ // 创建一个css样式表
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#eaeaea"
  },
  title:{
    marginTop: 16,
  }
}
StyleSheet.compose(styles1.container, styles2.title); // 合并两个样式表
StyleSheet.flatten([page.text,typography.header]); // 拍平并组合成一个样式

7.按钮 Button

一般使用TouchableHighlight或者TouchableOpacity代替

<Button
  title="Left button"  // 文本
  onPress={this.click()} // 点击事件
  color="#f194ff"// 文本的颜色(iOS)，或是按钮的背景色(Android)
  disabled // 禁用
/>

8.安全可视区 SafeAreaView

主要针对刘海屏，使用SafeAreaView包裹后，不会在刘海位置渲染页面，以免信息展示不全。
ScrollView的contentInsetAdjustmentBehavior="automatic"也有同样作用,但是滚动时会失效

<SafeAreaView style={styles.container}>
      <Text>Page content</Text>
 </SafeAreaView>

9.点击高亮和点击透明TouchableHighlight和TouchableOpacity

<TouchableHighlight
  style={{ borderRadius: 30 }}
  underlayColor={disabled ? '#D4D7DC' : '#005fbe'}
  onPress={handleSubmitClick}
>
  <Text
    style={{ ...style.submitButtonText, ...(disabled ? style.buttonDisabled : {}) }}
  >
  提 交
  </Text>
</TouchableHighlight>

10.FlatList实现上拉加载更多

<FlatList
  data={dataArray}
  renderItem={(data) => _renderItem(data)}
  keyExtractor={(index) => index}
  scrollEnabled={false}
  ListFooterComponent={() => genIndicator()}
  onEndReachedThreshold={0.5} // 距离内容最底部还有多远时触发onEndReached回调
  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} // 距离内容最底部还有多远时触发onEndReached回调
  onEndReached={() => {
    loadData();
  }}
/>

11.其他

image.png