跨平台组件

梗概

• RN使用高度抽象跨平台的组件

示例

视图组件

React Native 提供了一个基础的 View 组件，用于构建界面布局。View 相当于 HTML 的 div，可以用来容纳其他组件，并通过样式进行布局和装饰。

基本用法

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
 
const ExampleView = () => {
  return (
    <View style={styles.container}>
      <Text>这是一个视图组件</Text>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
 
export default ExampleView;

样式属性

• flex：用于定义子元素如何在父容器中分配空间。
• justifyContent：确定主轴方向上子元素的排列方式。
• alignItems：决定次轴方向上子元素的排列方式。
• backgroundColor：设置背景颜色。

注意事项

• 使用 flex 布局时，确保父容器正确设置了 flexDirection（默认为 column）。
• 在不同平台上可能会有细微的样式差异，因此需要进行适配和测试。

图片组件

React Native 的 Image 组件用于显示图片。它支持多种图片格式和来源，包括网络图片、本地资源等。

基本用法

import React from 'react';
import { Image, StyleSheet } from 'react-native';
 
const ExampleImage = () => {
  return (
    <Image
      style={styles.image}
      source={{ uri: 'https://example.com/image.jpg' }}
    />
  );
};
 
const styles = StyleSheet.create({
  image: {
    width: 100,
    height: 100,
    resizeMode: 'cover',
  },
});
 
export default ExampleImage;

常用属性

• source：指定图片的来源，可以是 URI 或 require 引入本地文件。
• style：用于设置图片的大小、边框等样式。
• resizeMode：控制图片如何适应其容器，可选值包括 cover, contain, 和 stretch。

使用技巧

• 为保证性能，尽量为网络图片指定固定宽高，以避免加载时出现闪烁或延迟。
• 使用缓存机制减少重复下载，提高应用响应速度。