|
@@ -1,184 +0,0 @@
|
|
|
-import React, { useState } from 'react';
|
|
|
-import {
|
|
|
- View,
|
|
|
- Text,
|
|
|
- TextInput,
|
|
|
- TouchableOpacity,
|
|
|
- StyleSheet,
|
|
|
- Alert,
|
|
|
- KeyboardAvoidingView,
|
|
|
- Platform,
|
|
|
- StatusBar,
|
|
|
- ActivityIndicator,
|
|
|
- ToastAndroid
|
|
|
-} from 'react-native';
|
|
|
-import { useNavigation } from '@react-navigation/native';
|
|
|
-import { NativeModules } from 'react-native';
|
|
|
-import dgram from 'react-native-udp';
|
|
|
-console.log("dgram", dgram)
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-const UdpScreen = ({ }) => {
|
|
|
- const navigation = useNavigation();
|
|
|
- const [username, setUsername] = useState('');
|
|
|
- const [password, setPassword] = useState('');
|
|
|
- const [isLoading, setIsLoading] = useState(false);
|
|
|
- const [secureTextEntry, setSecureTextEntry] = useState(true);
|
|
|
-
|
|
|
- const handleLogin = async () => {
|
|
|
- if (!username || !password) {
|
|
|
- ToastAndroid.show('请输入信息', 2000);
|
|
|
- return;
|
|
|
- }
|
|
|
- setIsLoading(true);
|
|
|
- try {
|
|
|
- // 创建 UDP Socket 实例
|
|
|
- const socket = dgram.createSocket('udp4');
|
|
|
- // 检查实例是否创建成功
|
|
|
- if (socket) {
|
|
|
- console.log(password, username)
|
|
|
- // 绑定端口、监听事件等操作
|
|
|
- socket.bind(password, username, (err) => {
|
|
|
- if (err) {
|
|
|
- ToastAndroid.show('绑定失败', 2000);
|
|
|
- } else {
|
|
|
- ToastAndroid.show('初始化成功', 2000);
|
|
|
- }
|
|
|
- });
|
|
|
- // 监听绑定成功事件
|
|
|
- socket.on('listening', () => {
|
|
|
- const address = socket.address();
|
|
|
- console.log("address",address)
|
|
|
- ToastAndroid.show(`${address.address}:${address.port}`, 2000)
|
|
|
- });
|
|
|
- } else {
|
|
|
- ToastAndroid.show('创建失败', 2000);
|
|
|
- }
|
|
|
-
|
|
|
- } catch (error: any) {
|
|
|
- console.log(error);
|
|
|
- } finally {
|
|
|
- setIsLoading(false);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- return (
|
|
|
- <KeyboardAvoidingView
|
|
|
- behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
|
- style={styles.container}>
|
|
|
- <StatusBar backgroundColor="#1E90FF" barStyle="light-content" />
|
|
|
-
|
|
|
- <View style={styles.logoContainer}>
|
|
|
- <Text style={styles.logoText}>测试UDP</Text>
|
|
|
- </View>
|
|
|
-
|
|
|
- <View style={styles.formContainer}>
|
|
|
- <TextInput
|
|
|
- style={styles.input}
|
|
|
- placeholder="地址"
|
|
|
- placeholderTextColor="#999"
|
|
|
- value={username}
|
|
|
- onChangeText={setUsername}
|
|
|
- autoCapitalize="none"
|
|
|
- autoCorrect={false}
|
|
|
- />
|
|
|
-
|
|
|
- <View style={styles.passwordInputContainer}>
|
|
|
- <TextInput
|
|
|
- style={styles.input}
|
|
|
- placeholder="端口"
|
|
|
- placeholderTextColor="#999"
|
|
|
- value={password}
|
|
|
- onChangeText={setPassword}
|
|
|
- autoCapitalize="none"
|
|
|
- autoCorrect={false}
|
|
|
- />
|
|
|
- </View>
|
|
|
-
|
|
|
- <TouchableOpacity
|
|
|
- style={styles.loginButton}
|
|
|
- onPress={handleLogin}
|
|
|
- disabled={isLoading}>
|
|
|
- {isLoading ? (
|
|
|
- <ActivityIndicator size="small" color="#fff" />
|
|
|
- ) : (
|
|
|
- <Text style={styles.loginButtonText}>连 接</Text>
|
|
|
- )}
|
|
|
- </TouchableOpacity>
|
|
|
- </View>
|
|
|
- </KeyboardAvoidingView>
|
|
|
- );
|
|
|
-};
|
|
|
-
|
|
|
-const styles = StyleSheet.create({
|
|
|
- container: {
|
|
|
- flex: 1,
|
|
|
- backgroundColor: '#fff',
|
|
|
- paddingHorizontal: 30,
|
|
|
- },
|
|
|
- logoContainer: {
|
|
|
- flex: 1,
|
|
|
- justifyContent: 'center',
|
|
|
- alignItems: 'center',
|
|
|
- },
|
|
|
- logoText: {
|
|
|
- fontSize: 32,
|
|
|
- fontWeight: 'bold',
|
|
|
- color: '#1E90FF',
|
|
|
- },
|
|
|
- formContainer: {
|
|
|
- flex: 2,
|
|
|
- justifyContent: 'center',
|
|
|
- },
|
|
|
- input: {
|
|
|
- height: 50,
|
|
|
- backgroundColor: '#f5f5f5',
|
|
|
- borderRadius: 8,
|
|
|
- paddingHorizontal: 15,
|
|
|
- marginBottom: 15,
|
|
|
- fontSize: 16,
|
|
|
- },
|
|
|
- passwordInputContainer: {
|
|
|
- position: 'relative',
|
|
|
- },
|
|
|
- togglePassword: {
|
|
|
- position: 'absolute',
|
|
|
- right: 15,
|
|
|
- top: 15,
|
|
|
- },
|
|
|
- togglePasswordText: {
|
|
|
- color: '#1E90FF',
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- loginButton: {
|
|
|
- height: 50,
|
|
|
- backgroundColor: '#1E90FF',
|
|
|
- borderRadius: 8,
|
|
|
- justifyContent: 'center',
|
|
|
- alignItems: 'center',
|
|
|
- marginTop: 10,
|
|
|
- },
|
|
|
- loginButtonText: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 18,
|
|
|
- fontWeight: 'bold',
|
|
|
- },
|
|
|
- footer: {
|
|
|
- flexDirection: 'row',
|
|
|
- justifyContent: 'center',
|
|
|
- marginTop: 20,
|
|
|
- },
|
|
|
- footerText: {
|
|
|
- color: '#666',
|
|
|
- },
|
|
|
- registerText: {
|
|
|
- color: '#1E90FF',
|
|
|
- marginLeft: 5,
|
|
|
- fontWeight: 'bold',
|
|
|
- },
|
|
|
-});
|
|
|
-
|
|
|
-export default UdpScreen;
|