React Native 组件详解之 KeyboardAvoidingView、Modal、Pressable、RefreshControl 、 ScrollView

以下是对 React Native 中的 KeyboardAvoidingView、Modal、Pressable、RefreshControl 和 ScrollView 组件的详细解释，包括示例代码和 API 说明：

KeyboardAvoidingView

KeyboardAvoidingView 是一个容器组件，用于在键盘弹出时自动调整其子组件的位置，以避免被键盘遮挡。

示例代码

import React, { useState } from 'react';
import { KeyboardAvoidingView, StyleSheet, Text, TextInput, View } from 'react-native';

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

  return (
    <KeyboardAvoidingView style={styles.container} behavior="padding">
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Type here..."
          value={text}
          onChangeText={setText}
        />
      </View>
      <View style={styles.buttonContainer}>
        <Text style={styles.button}>Submit</Text>
      </View>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  inputContainer: {
    width: '80%',
    padding: 10,
    backgroundColor: '#f5f5f5',
    borderRadius: 5,
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    padding: 5,
  },
  buttonContainer: {
    width: '80%',
    padding: 10,
    backgroundColor: '#007bff',
    borderRadius: 5,
  },
  button: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default MyComponent;

API 说明

• behavior: 指定键盘弹出时的行为。可以是 'height'、'position'、'padding' 或 'none'。
• keyboardVerticalOffset: 指定键盘弹出时的垂直偏移量。

Modal

Modal 是一个组件，用于在屏幕上显示一个模态视图。

示例代码

import React, { useState } from 'react';
import { Modal, StyleSheet, Text, View, Button } from 'react-native';

const MyComponent = () => {
  const [visible, setVisible] = useState(false);

  const toggleModal = () => {
    setVisible(!visible);
  };

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={toggleModal} />
      <Modal
        animationType="slide"
        transparent={false}
        visible={visible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
          setVisible(!visible);
        }}
      >
        <View style={styles.modalView}>
          <Text style={styles.modalText}>Hello, World!</Text>
          <Button title="Hide Modal" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalView: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
});

export default MyComponent;

API 说明

• animationType: 指定模态视图的动画类型。可以是 'none'、'slide'、'fade' 或 'scale'。
• transparent: 指定模态视图的背景是否透明。
• visible: 指定模态视图是否可见。
• onRequestClose: 当用户尝试关闭模态视图时调用的回调函数。

Pressable

Pressable 是一个组件，用于处理用户的按下和释放事件。

示例代码

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

const MyComponent = () => {
  return (
    <Pressable style={styles.button} onPress={() => console.log('Button pressed')}>
      <Text style={styles.text}>Press me</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#007bff',
    borderRadius: 5,
  },
  text: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default MyComponent;

API 说明

• onPress: 当用户按下组件时调用的回调函数。
• onLongPress: 当用户长按组件时调用的回调函数。
• delayLongPress: 指定长按事件的延迟时间（以毫秒为单位）。

RefreshControl

RefreshControl 是一个组件，用于在 ScrollView、FlatList 或 SectionList 中添加下拉刷新功能。

示例代码

import React, { useState, useEffect } from 'react';
import { RefreshControl, ScrollView, StyleSheet, Text } from 'react-native';

const MyComponent = () => {
  const [data, setData] = useState([]);
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);
    // Simulate fetching data from a server
    setTimeout(() => {
      setData([...data, 'New item']);
      setRefreshing(false);
    }, 2000);
  };

  return (
    <ScrollView
      contentContainerStyle={styles.scrollView}
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={onRefresh}
        />
      }
    >
      {data.map((item, index) => (
        <Text key={index} style={styles.text}>{item}</Text>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  text: {
    fontSize: 16,
    marginBottom: 10,
  },
});

export default MyComponent;

API 说明

• refreshing: 指定当前是否正在刷新。
• onRefresh: 当用户下拉刷新时调用的回调函数。
• tintColor: 指定刷新指示器的颜色。
• title: 指定刷新指示器的文本。

ScrollView

ScrollView 是一个组件，用于显示一个可以滚动的视图。

示例代码

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

const MyComponent = () => {
  return (
    <ScrollView style={styles.scrollView}>
      <Text style={styles.text}>Item 1</Text>
      <Text style={styles.text}>Item 2</Text>
      <Text style={styles.text}>Item 3</Text>
      <Text style={styles.text}>Item 4</Text>
      <Text style={styles.text}>Item 5</Text>
      <Text style={styles.text}>Item 6</Text>
      <Text style={styles.text}>Item 7</Text>
      <Text style={styles.text}>Item 8</Text>
      <Text style={styles.text}>Item 9</Text>
      <Text style={styles.text}>Item 10</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  text: {
    fontSize: 16,
    marginBottom: 10,
  },
});

export default MyComponent;

API 说明

• contentContainerStyle: 指定 ScrollView 内容容器的样式。
• horizontal: 指定 ScrollView 是否为水平滚动。
• showsVerticalScrollIndicator: 指定是否显示垂直滚动指示器。
• showsHorizontalScrollIndicator: 指定是否显示水平滚动指示器。
• refreshControl: 指定一个 RefreshControl 组件，用于添加下拉刷新功能。