React native 知识点整理之基础组件和API

我就是我 2022-12-08 14:29 237阅读 0赞

[基础概念部分][Link 1]

#### 基础组件和API ####

1.  [ Flex布局][Flex]

flexDirection//flex布局方向
    justifyContent//主轴上对齐方式
    alignItems//副轴上对齐方式
    
    flexWrap//flex换行设置
    flexGrow//（子元素）放大权重
    flexShrink//(子元素)缩小权重
    flexBasis//（子元素）主轴空间配置
    flex//（子元素）上三者缩写
    alignSelf//（子元素）单元素对齐方式

> 当flex为一个正整数时，组件尺寸会具有弹性，并根据具体的 flex 值来按比例分配。比如两个组件在同一个父容器中，一个flex为 2，另一个flex为 1，则两者的尺寸比为 2：1。  
> flex: equates to flexGrow: , flexShrink: 1, flexBasis: 0.

> 当flex为 0 时，组件尺寸由width和height决定，此时不再具有弹性。

> 当flex为-1时，组件尺寸一般还是由width和height决定。但是当空间不够时，组件尺寸会收缩到minWidth和minHeight所设定的值。

1.  [View组件][View]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center]

1.  [Text组件][Text]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 1]

> fontStyle、fontFamily、fontSize、fontWeight、textDecorationLine

> textAlign指定文本对齐方式。

1.  [TextInput组件][TextInput]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 2]

keyboardType决定弹出何种软键盘类型，譬如numeric（纯数字键盘）。
    
    maxLength是数值类型的属性用来定义TextInput组件最多允许用户输人多少个字符。
    
    placeholder是字符串类型的属性。它在TextInput组件被渲染时会显示在组件内，但颜色比正常输人的字符淡些，并且用户在TextInput组件中输人第一个字符时，它就会消失。
    
    secureTextEntry如果为 true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为 false。multiline={ true}时不可用。
    
    onChangeText当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。
    
    placeholderTextColor定义了placeholder字符串的颜色。

1.  [Image组件][Image]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 3]

import React, {  Component } from 'react';
    import {  AppRegistry, View, Image, StyleSheet } from 'react-native';
    
    const styles = StyleSheet.create({ 
      container: { 
        paddingTop: 50,
      },
      tinyLogo: { 
        width: 50,
        height: 50,
      },
      logo: { 
        width: 66,
        height: 58,
      },
    });
    
    class DisplayAnImage extends Component { 
      render() { 
        return (
          <View style={ styles.container}>
            // 本地静态资源
            <Image
              style={ styles.tinyLogo}
              source={ require('@expo/snack-static/react-native-logo.png')}
            />
            // 网络url图片
            <Image
              style={ styles.tinyLogo}
              source={ { uri: 'https://reactnative.dev/img/tiny_logo.png'}}
            />
            //  base64 uri 形式图片
            <Image
              style={ styles.logo}
              source={ { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
            />
          </View>
        );
      }
    }
    export default DisplayAnImage;

> resizeMethod当图片实际尺寸和容器样式尺寸不一致时，决定以怎样的策略来调整图片的尺寸。默认为auto。

1.  [TouchableOpacity组件][TouchableOpacity]

本组件用于封装视图，使其可以正确响应触摸操作。
    
    当按下的时候，封装的视图的不透明度会降低。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 4]

> onPress属性是一个回调函数。onPress事件会在手指离开组件后马上被激活。需要注意的是，在手指停留在组件上期间，组件的触摸响应者身份被取消，onPress事件将不会被激活。如果触摸组件没有onPress属性值，则触摸组件不会有触摸效果。

> delayPressIn用来设置手指接触屏幕多少毫秒后，onPressIn事件会被激活。默认值是0。

1.  [ScrollView组件][ScrollView]

> 一个封装了平台的 ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。

> ScrollView 必须有一个确定的高度才能正常工作，一般来说我们会 ScrollView 设置flex: 1以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了 flex或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 5]

> horizontal是布尔类型的属性。当它为true时，ScrollView的所有子组件将会水平排列;当它为false时，ScrollView组件的所有子组件将垂直排列。它的默认值是false。

> onScroll在滚动的过程中，每帧最多调用一次此回调函数。

> scrollEnabled是布尔类型的属性。它的默认值是true。当它为false时，ScrollView组件将不能卷动。

> showsVerticalScrollIndicator当此属性为 true 的时候，显示一个垂直方向的滚动条。

1.  [FlatList组件][FlatList]（高性能的简单列表组件）

类似于vue中的v-for循环

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 7]

> renderItem(\{ item, index, separators \}); 从data中挨个取出数据并渲染到列表中。

> data为了简化起见，data 属性目前只支持普通数组。

> keyExtractor(item: object, index: number) => string; 此函数用于为给定的 item生成一个不重复的 key。Key 的作用是使 React 能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。

> ListHeaderComponent 头部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的element。

> ListFooterComponent 尾部组件。

1.  [ActivityIndicator组件][ActivityIndicator]（显示一个圆形的 loading 提示符号）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 8]

> color滚轮的前景颜色

> animating是否要显示指示器动画，默认为 true 表示显示，false 则隐藏。

1.  [Switch组件][Switch]（跨平台通用的“开关”组件）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 9]

disabled：如果为true则禁用此组件的交互。
    
    trackColor：开启状态时的背景颜色。
    
    thumbColor：开关上圆形按钮的背景颜色。在 iOS 上设置此颜色会丢失按钮的投影。
    
    tintColor：关闭状态时的边框颜色(iOS)或背景颜色(Android)。
    
    value：表示此开关是否打开。默认为 false（关闭状态）。

1.  [Picker组件][Picker](下拉选择框，已过时)

Picker组件可以在屏幕上弹出一个窗口，供用户在所提供的选项中选择一个。
    
    onValueChange：某一项被选中时执行此回调。
    
    selectedValue：默认选中的值。可以是字符串或整数。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 10]

1.  [Slider组件][Slider]（用于选择一个范围值的组件，已过时）

disabled如果为 true，用户就不能移动滑块。默认为 false。
    
    maximumValue：滑块的最大值（当滑块滑到最右端时表示的值）。默认为 1。
    
    minimumValue：滑块的最小值（当滑块滑到最左端时表示的值）。默认为 0。
    
    minimumTrackTintColor：滑块左侧轨道的颜色。在 iOS 上默认为一个蓝色的渐变色。

1.  [Dimensions API][]（用于获取设备屏幕的宽高）

使用方法：
    import {  Dimensions } from 'react-native';
    const windowWidth = Dimensions.get('window').width;
    const windowHeight = Dimensions.get('window').height;

1.  [PanResponder API][]

> PanResponder类可以将多点触摸操作协调成一个手势。它使得一个单点触摸可以接受更多的触摸操作，也可以用于识别简单的多点触摸手势。

> PanResponderAPI的**基本思想**是:监视屏幕上指定大小、位置的矩形区域，当用手指按压这个区域中的某点后，开发者会收到这个事件;当按压后拖动手指时，开发者会收到手势引发的各类事件;当手指离开这个矩形区域时，开发者也会收到相应事件。

1.  Platform API
2.  [Alert API][]（启动一个提示对话框，包含对应的标题和信息。）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 11]

1.  Clipboard API （访问操作系统剪贴板）

> React Native为开发者提供了ClipboardAPI,让开发者可以访问设备操作系统中剪贴板中的内容，或者向剪贴板中存放内容。目前还只支持获取或者存放字符串。

> ClipboardAPI比较简单，只有两个静态函数: setString向剪贴板中存放字符串; getString 从剪贴板中取出字符串。

[Link 1]: https://blog.csdn.net/qq_44768564/article/details/108690325
[Flex]: https://reactnative.cn/docs/layout-props
[View]: https://reactnative.cn/docs/view
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/43d49c0e4b164238b87123c1665e8544.png
[Text]: https://reactnative.cn/docs/text
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/895fc9ff2ed842dea8a4ed74ef85ad0e.png
[TextInput]: https://reactnative.cn/docs/textinput
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/8e547b9a2fb74b2eb77c265257c7c97f.png
[Image]: https://reactnative.cn/docs/image
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/dd28efc68f344fa484ab5bab85396510.png
[TouchableOpacity]: https://reactnative.cn/docs/touchableopacity
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/d27bc3261e384a8fa5fcf35c1c8e1502.png
[ScrollView]: https://reactnative.cn/docs/scrollview
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/6fc1cfc4308c4a6ea0badb19c6a7070c.png
[FlatList]: https://reactnative.cn/docs/flatlist
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/f5df1661ac2246c1b333b4e0202075ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/bbf4007a6af34364adbbab62df960f4f.png
[ActivityIndicator]: https://reactnative.cn/docs/activityindicator
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/d408605d4516480098d88e16ffaad408.png
[Switch]: https://reactnative.cn/docs/switch
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/cfee96146fbf4aaab1f5bb3c98f2686a.png
[Picker]: https://reactnative.cn/docs/picker#mode
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/c2f04aed86c74c1488e19bb63a79aa3e.png
[Slider]: https://reactnative.cn/docs/slider
[Dimensions API]: https://reactnative.cn/docs/dimensions
[PanResponder API]: https://reactnative.cn/docs/panresponder
[Alert API]: https://reactnative.cn/docs/alert
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/8738f419ba5042c0bd29cd0207e961e2.png