import React, { Component } from
'react'
import { View,TextInput,ScrollView,Text } from
'react-native'
import { List, Button,Flex } from
'antd-mobile'
const
Item = List.Item
class
PingTest
extends
Component {
constructor(props) {
super(props)
this.state = {
ping:
''
,
msglist:[],
}
this.cycle = null
}
pingCycle = () => {
const
{ ping,msglist } = this.state
const
start = (
new
Date
()).getTime()
fetch(`http:
const
delta = (
new
Date
()).getTime() - start
if
(delta > 5000) {
msglist.push({
status: 0,
msg: `ping ${ping} 连接超时`,
})
}
else
{
msglist.push({
status: 1,
msg: `ping ${ping} time=${delta} ms`,
})
}
this.setState({
msglist,
})
}).
catch
((err) => {
msglist.push({
status: 0,
msg: `ping ${ping} 连接失败`,
})
this.setState({
msglist,
})
})
}
handlePing = () => {
this.cycle = setInterval(this.pingCycle,1000)
}
handleStopPing = () => {
clearInterval(this.cycle)
}
render() {
const
{msglist} = this.state
return
(
<View style={{ height: '100%'}}>
<List>
<Item>
<TextInput
onChangeText={text => this.setState({ping: text})}
/>
</Item>
<Item>
<Flex>
<Flex.Item flex={1}><Button type=
"primary"
onClick={this.handlePing.bind(this)}>Ping</Button></Flex.Item>
<Flex.Item flex={1}><Button onClick={this.handleStopPing.bind(this)}>停止</Button></Flex.Item>
</Flex>
</Item>
</List>
<ScrollView style={{ height: 200,backgroundColor:
"#000"
}}>
{msglist.length ? msglist.map(e =>
<Flex>
<Flex.Item>
<Text style={{color: e.status === 1 ? '#87d068' : '#f50'}}>{e.msg}</Text>
</Flex.Item>
</Flex>):null}
</ScrollView>
</View>
)
}
}
export
default
PingTest