技术文档中心
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
  • 基础入门

    • React Native 学习指南
    • 核心组件
    • 样式
  • 进阶内容

    • 导航
    • 网络请求
    • 本地存储
    • 常用 API

常用 API

Alert

import { Alert } from 'react-native';

// 简单提示
Alert.alert('提示', '这是一条消息');

// 带按钮
Alert.alert(
  '确认',
  '确定要删除吗?',
  [
    { text: '取消', style: 'cancel' },
    { text: '确定', onPress: () => console.log('删除') }
  ]
);

Dimensions

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');
const screenWidth = Dimensions.get('screen').width;

// 监听变化
Dimensions.addEventListener('change', ({ window, screen }) => {
  console.log(window.width, window.height);
});

Platform

import { Platform } from 'react-native';

if (Platform.OS === 'ios') {
  // iOS 特定代码
} else if (Platform.OS === 'android') {
  // Android 特定代码
}

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: { paddingTop: 20 },
      android: { paddingTop: 0 }
    })
  }
});

Keyboard

import { Keyboard } from 'react-native';

// 关闭键盘
Keyboard.dismiss();

// 监听键盘
useEffect(() => {
  const showListener = Keyboard.addListener('keyboardDidShow', () => {
    console.log('键盘显示');
  });
  const hideListener = Keyboard.addListener('keyboardDidHide', () => {
    console.log('键盘隐藏');
  });

  return () => {
    showListener.remove();
    hideListener.remove();
  };
}, []);

Linking

import { Linking } from 'react-native';

// 打开 URL
Linking.openURL('https://example.com');

// 打开电话
Linking.openURL('tel:10086');

// 打开邮件
Linking.openURL('mailto:support@example.com');

// 检查是否可以打开
Linking.canOpenURL('https://example.com').then(supported => {
  if (supported) {
    Linking.openURL('https://example.com');
  }
});

AsyncStorage

yarn add @react-native-async-storage/async-storage
import AsyncStorage from '@react-native-async-storage/async-storage';

// 存储
await AsyncStorage.setItem('key', 'value');

// 读取
const value = await AsyncStorage.getItem('key');

// 删除
await AsyncStorage.removeItem('key');

// 清空
await AsyncStorage.clear();

// 存储对象
await AsyncStorage.setItem('user', JSON.stringify({ name: 'John' }));
const user = JSON.parse(await AsyncStorage.getItem('user'));

NetInfo

yarn add @react-native-community/netinfo
import NetInfo from '@react-native-community/netinfo';

// 获取网络状态
NetInfo.fetch().then(state => {
  console.log('连接类型:', state.type);
  console.log('是否连接:', state.isConnected);
});

// 监听网络变化
const unsubscribe = NetInfo.addEventListener(state => {
  console.log('网络状态:', state);
});

Animated

import { Animated } from 'react-native';

function FadeInView() {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true
    }).start();
  }, []);

  return (
    <Animated.View style={{ opacity: fadeAnim }}>
      <Text>淡入效果</Text>
    </Animated.View>
  );
}
最近更新: 2026/2/6 15:39
Contributors: hailong
Prev
本地存储