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

最新推荐文章于 2024-04-30 17:21:51 发布

汪酱～

最新推荐文章于 2024-04-30 17:21:51 发布

阅读量273

点赞数

分类专栏： react-native

本文链接：https://blog.csdn.net/qq_44768564/article/details/108692104

版权

react-native 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基础概念部分

基础组件和API

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所设定的值。

View组件

在这里插入图片描述

Text组件

在这里插入图片描述

fontStyle、fontFamily、fontSize、fontWeight、textDecorationLine

textAlign指定文本对齐方式。

TextInput组件

在这里插入图片描述

keyboardType决定弹出何种软键盘类型，譬如numeric（纯数字键盘）。

maxLength是数值类型的属性用来定义TextInput组件最多允许用户输人多少个字符。

placeholder是字符串类型的属性。它在TextInput组件被渲染时会显示在组件内，但颜色比正常输人的字符淡些，并且用户在TextInput组件中输人第一个字符时，它就会消失。

secureTextEntry如果为 true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为 false。multiline={true}时不可用。

onChangeText当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。

placeholderTextColor定义了placeholder字符串的颜色。

Image组件

在这里插入图片描述

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。

TouchableOpacity组件

本组件用于封装视图，使其可以正确响应触摸操作。

当按下的时候，封装的视图的不透明度会降低。

在这里插入图片描述

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

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

ScrollView组件

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

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

在这里插入图片描述

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

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

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

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

FlatList组件（高性能的简单列表组件）

类似于vue中的v-for循环

在这里插入图片描述

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

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

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

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

ListFooterComponent 尾部组件。

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

在这里插入图片描述

color滚轮的前景颜色

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

Switch组件（跨平台通用的“开关”组件）

在这里插入图片描述

disabled：如果为true则禁用此组件的交互。

trackColor：开启状态时的背景颜色。

thumbColor：开关上圆形按钮的背景颜色。在 iOS 上设置此颜色会丢失按钮的投影。

tintColor：关闭状态时的边框颜色(iOS)或背景颜色(Android)。

value：表示此开关是否打开。默认为 false（关闭状态）。

Picker组件(下拉选择框，已过时)

Picker组件可以在屏幕上弹出一个窗口，供用户在所提供的选项中选择一个。

onValueChange：某一项被选中时执行此回调。

selectedValue：默认选中的值。可以是字符串或整数。

在这里插入图片描述

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

disabled如果为 true，用户就不能移动滑块。默认为 false。

maximumValue：滑块的最大值（当滑块滑到最右端时表示的值）。默认为 1。

minimumValue：滑块的最小值（当滑块滑到最左端时表示的值）。默认为 0。

minimumTrackTintColor：滑块左侧轨道的颜色。在 iOS 上默认为一个蓝色的渐变色。

Dimensions API（用于获取设备屏幕的宽高）

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