ReactNative内置基础组件

最新推荐文章于 2025-04-23 17:30:19 发布

zjy_yue

最新推荐文章于 2025-04-23 17:30:19 发布

阅读量964

点赞数 21

文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/zjy_yue/article/details/146518813

版权

在React Native开发中，掌握核心组件的使用是构建高质量应用的基础。本文将详细介绍四个最常用的基础组件：Image、TextInput、Button和Switch，深入探讨它们的常用属性和使用场景。

Image组件

Image组件是React Native中用于显示图片的核心组件，支持显示网络图片、静态资源和本地图片。

主要属性

source: 指定图片来源
- 本地图片：require('./path/to/image.png')
- 网络图片：{uri: 'https://example.com/image.jpg'}
- Base64：{uri: 'data:image/png;base64,...'}
resizeMode: 设置图片的缩放模式
- cover: 保持图片比例填充容器，可能裁剪
- contain: 保持图片比例完整显示
- stretch: 拉伸图片填充容器
- center: 居中显示，不缩放
- repeat: 平铺显示（仅iOS支持）
style: 样式属性
- width/height: 设置图片尺寸
- borderRadius: 设置圆角
- opacity: 设置透明度
- tintColor: 图片着色
加载相关属性
- onLoadStart: 开始加载时的回调
- onLoad: 加载完成的回调
- onLoadEnd: 加载结束的回调（成功或失败）
- onError: 加载失败的回调
- loadingIndicatorSource: 加载过程中显示的占位图
性能优化属性
- defaultSource: 主图加载前显示的默认图片
- blurRadius: 图片模糊效果（仅iOS）
- fadeDuration: 淡入动画时长（仅Android）
- progressiveRenderingEnabled: 渐进式加载（仅Android）

Gif和Webp支持

使用Expo创建的项目默认支持Gif和Webp格式。如果是通过React Native CLI创建的项目，需要在android/app/build.gradle中添加以下依赖：

dependencies {
    // Gif支持
    implementation 'com.facebook.fresco:animated-gif:2.5.0'
    // Webp支持
    implementation 'com.facebook.fresco:animated-webp:2.5.0'
    implementation 'com.facebook.fresco:webpsupport:2.5.0'
}

TextInput组件

TextInput是用于文本输入的基础组件，支持单行和多行文本输入。

常用属性

基础属性
- value: 输入框的当前值
- onChangeText: 文本变化时的回调函数
- placeholder: 占位文本
- placeholderTextColor: 占位文本颜色
- maxLength: 最大输入长度
键盘相关
- keyboardType: 键盘类型
  - default: 默认键盘
  - numeric: 数字键盘
  - email-address: 邮箱键盘
  - phone-pad: 电话键盘
  - decimal-pad: 带小数点的数字键盘
- keyboardAppearance: 键盘外观（仅iOS）
- returnKeyType: 回车键类型
- onSubmitEditing: 提交编辑时的回调
输入控制
- secureTextEntry: 密码输入模式
- multiline: 多行文本输入
- editable: 是否可编辑
- selectTextOnFocus: 获取焦点时是否全选
- autoCapitalize: 自动大写
- autoCorrect: 自动纠错
- autoComplete: 自动完成类型
焦点控制
- autoFocus: 自动获取焦点
- onFocus: 获取焦点时的回调
- onBlur: 失去焦点时的回调
- blurOnSubmit: 提交时是否失去焦点
样式相关
- style: 自定义样式
- textAlign: 文本对齐方式
- textAlignVertical: 垂直对齐方式
- cursorColor: 光标颜色

示例代码

<TextInput
    style={styles.input}
    placeholder='请输入内容'
    value={text}
    onChangeText={(e) => setText(e)}
    keyboardType='numeric'
/>

Button组件

Button是React Native提供的跨平台按钮组件，提供了基本的按钮功能。

主要属性

基础属性
- onPress: 按钮点击事件处理函数
- title: 按钮文字
- color: 按钮颜色
- disabled: 是否禁用
- accessibilityLabel: 无障碍标签
触摸反馈
- onPressIn: 按下时的回调
- onPressOut: 松开时的回调
- onLongPress: 长按时的回调
- delayLongPress: 触发长按的时间
- pressRetentionOffset: 触摸响应范围
自定义样式（使用TouchableOpacity或TouchableNativeFeedback实现）

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const CustomButton = ({ onPress, title, disabled }) => (
  <TouchableOpacity
    style={[styles.button, disabled && styles.disabled]}
    onPress={onPress}
    disabled={disabled}
  >
    <Text style={styles.text}>{title}</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2196F3',
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
  },
  disabled: {
    backgroundColor: '#cccccc',
    opacity: 0.8,
  },
  text: {
    color: 'white',
    fontSize: 16,
  },
});

示例代码

<Button
    title="点击我"
    onPress={() => alert('按钮被点击')}
    color="#841584"
    disabled={false}
/>

Switch组件

Switch是一个跨平台的开关选择器组件。

常用属性

基础属性
- value: 开关状态（true/false）
- onValueChange: 状态改变时的回调函数
- disabled: 是否禁用
样式定制
- trackColor: 开关轨道颜色，可以是一个对象，包含false和true两个键，分别表示关闭状态的颜色和开启状态的颜色
  - false: 关闭状态的颜色
  - true: 开启状态的颜色
- thumbColor: 开关按钮的颜色（小球的颜色）
- ios_backgroundColor: iOS背景色
动画效果

import { Animated, Easing } from 'react-native';

// 创建动画值
const switchAnimation = new Animated.Value(0);

// 切换动画
const toggleSwitch = () => {
  const toValue = isEnabled ? 0 : 1;
  Animated.timing(switchAnimation, {
    toValue,
    duration: 200,
    easing: Easing.linear,
    useNativeDriver: true,
  }).start();
  setIsEnabled(!isEnabled);
};

// 应用动画
const animatedStyle = {
  transform: [{
    scale: switchAnimation.interpolate({
      inputRange: [0, 1],
      outputRange: [1, 1.1],
    }),
  }],
};

状态管理（使用React Context）

const SwitchContext = React.createContext();

const SwitchProvider = ({ children }) => {
  const [switches, setSwitches] = useState({});

  const toggleSwitch = (id) => {
    setSwitches(prev => ({
      ...prev,
      [id]: !prev[id],
    }));
  };

  return (
    <SwitchContext.Provider value={{ switches, toggleSwitch }}>
      {children}
    </SwitchContext.Provider>
  );
};

示例代码

<Switch
    value={isEnabled}
    onValueChange={toggleSwitch}
    trackColor={{ false: "#767577", true: "#81b0ff" }}
    thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
/>