詳細講一下在RN(ReactNative)中，6個比較常用的組件以及詳細的用法

1.View 组件（基础容器）

import { View, StyleSheet } from 'react-native';

const MyComponent = () => {
  return (
    <View 
      style={styles.container}  // 样式
      pointerEvents="none"      // 控制触摸事件：'none', 'box-none', 'box-only', 'auto'
      accessible={true}         // 无障碍访问
    >
      {/* 子组件 */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,                    // flex 布局
    padding: 10,                // 内边距
    backgroundColor: '#fff',    // 背景色
    borderRadius: 8,            // 圆角
    elevation: 5,               // Android 阴影
    shadowColor: '#000',        // iOS 阴影颜色
    shadowOffset: {             // iOS 阴影偏移
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,        // iOS 阴影透明度
    shadowRadius: 3.84,         // iOS 阴影半径
  }
});

2.Text 组件（文本显示）：

import { Text } from 'react-native';

const TextExample = () => {
  return (
    <Text
      numberOfLines={2}           // 最大行数
      ellipsizeMode="tail"        // 文本截断方式：'head', 'middle', 'tail', 'clip'
      selectable={true}           // 是否可选择
      style={styles.text}         // 样式
      onPress={() => {}}          // 点击事件
    >
      这是一段文本
    </Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 16,                 // 字体大小
    fontWeight: 'bold',           // 字体粗细
    color: '#333',               // 文字颜色
    textAlign: 'center',         // 文本对齐
    lineHeight: 24,              // 行高
    letterSpacing: 0.5,          // 字间距
    textDecorationLine: 'underline', // 文本装饰线
  }
});

3.Image 组件（图片显示）

import { Image } from 'react-native';

const ImageExample = () => {
  return (
    <Image
      source={
  
  {                   // 图片源
        uri: 'https://example.com/image.jpg',
        // 或本地图片：source={require('./image.jpg')}
      }}
      style={styles.image}        // 样式
      resizeMode="cover"          // 缩放模式：'cover', 'contain', 'stretch', 'center'
      blurRadius={0}              // 模糊效果
      fadeDuration={300}          // 淡入动画时长
      onLoad={() => {}}           // 加载完成回调
      onError={() => {}}          // 加载错误回调
      defaultSource={require('./placeholder.jpg')} // 加载占位图
    />
  );
};

const styles = StyleSheet.create({
  image: {
    width: 200,                   // 宽度
    height: 200,                  // 高度
    borderRadius: 100,            // 圆角
  }
});

4.TouchableOpacity 组件（可点击容器）：

import { TouchableOpacity } from 'react-native';

const ButtonExample = () => {
  return (
    <TouchableOpacity
      style={styles.button}        // 样式
      activeOpacity={0.7}          // 按下时的透明度
      onPress={() => {}}           // 点击事件
      onLongPress={() => {}}       // 长按事件
      disabled={false}             // 是否禁用
    >
      <Text>点击我</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    padding: 10,
    backgroundColor: '#007AFF',
    borderRadius: 5,
    alignItems: 'center',         // 子元素水平居中
    justifyContent: 'center',     // 子元素垂直居中
  }
});

5.TextInput 组件（输入框）：

import { TextInput } from 'react-native';

const InputExample = () => {
  const [text, setText] = useState('');

  return (
    <TextInput
      value={text}                 // 输入值
      onChangeText={setText}       // 值改变回调
      placeholder="请输入..."      // 占位文本
      placeholderTextColor="#999"  // 占位文本颜色
      keyboardType="default"       // 键盘类型
      secureTextEntry={false}      // 密码输入模式
      multiline={false}            // 多行输入
      maxLength={100}              // 最大长度
      autoCapitalize="none"        // 自动大写
      autoCorrect={false}          // 自动纠正
      style={styles.input}         // 样式
      onFocus={() => {}}          // 获得焦点回调
      onBlur={() => {}}           // 失去焦点回调
    />
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 5,
    paddingHorizontal: 10,
    backgroundColor: '#fff',
  }
});

6.ScrollView 组件（滚动容器）：

import { ScrollView, RefreshControl } from 'react-native';

const ScrollExample = () => {
  const [refreshing, setRefreshing] = useState(false);

  return (
    <ScrollView
      style={styles.scrollView}    // 容器样式
      contentContainerStyle={styles.content} // 内容容器样式
      horizontal={false}           // 是否水平滚动
      showsVerticalScrollIndicator={false}   // 显示垂直滚动条
      bounces={true}              // iOS 弹性效果
      scrollEnabled={true}         // 是否可以滚动
      refreshControl={             // 下拉刷新控件
        <RefreshControl
          refreshing={refreshing}
          onRefresh={() => {
            setRefreshing(true);
            // 刷新逻辑
            setTimeout(() => setRefreshing(false), 2000);
          }}
        />
      }
    >
      {/* 滚动内容 */}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
  },
  content: {
    padding: 15,
  }
});

这些是最基础也是最常用的组件，每个组件都有很多配置项和样式属性。建议：

• 根据实际需求选择合适的组件

• 注意性能优化

• 考虑平台差异（iOS/Android）

• 合理使用样式和布局

原文地址：https://blog.csdn.net/m0_73574455/article/details/145312727

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！