import { Alert } from 'react-native';
Alert.alert('提示', '这是一条消息');
Alert.alert(
'确认',
'确定要删除吗?',
[
{ text: '取消', style: 'cancel' },
{ text: '确定', onPress: () => console.log('删除') }
]
);
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);
});
import { Platform } from 'react-native';
if (Platform.OS === 'ios') {
} else if (Platform.OS === 'android') {
}
const styles = StyleSheet.create({
container: {
...Platform.select({
ios: { paddingTop: 20 },
android: { paddingTop: 0 }
})
}
});
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();
};
}, []);
import { Linking } from 'react-native';
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');
}
});
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'));
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);
});
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>
);
}