kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-03-27 22:54:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

NetInfo: Cleaned up code and examples

Browse Source 
Reviewed By: andreicoman11

Differential Revision: D2723578

fb-gh-sync-id: b7bb9ce69f24ff5dcf38409de92d57f53da003fa
This commit is contained in:
Konstantin Raev
2015-12-08 09:30:07 -08:00
committed by facebook-github-bot-9
parent e2c35dddba
commit c9d796fc6a
6 changed files with 220 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
Examples/UIExplorer/NetInfoExample.android.js
View File

@@ -1,158 +0,0 @@
/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* @flow
*/
'use strict';
const React = require('react-native');
const {
NetInfo, // requires android.permission.ACCESS_NETWORK_STATE
Text,
View
} = React;
const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
const ConnectionSubscription = React.createClass({
getInitialState() {
return {
connectionHistory: [],
};
},
componentDidMount: function() {
NetInfo.addEventListener(
'change',
this._handleConnectionChange
);
},
componentWillUnmount: function() {
NetInfo.removeEventListener(
'change',
this._handleConnectionChange
);
},
_handleConnectionChange: function(netInfo) {
var connectionHistory = this.state.connectionHistory.slice();
connectionHistory.push(netInfo);
this.setState({
connectionHistory,
});
},
render() {
return (
<Text>{JSON.stringify(this.state.connectionHistory)}</Text>
);
}
});
const ConnectionCurrent = React.createClass({
getInitialState() {
return {
netInfo: null,
};
},
componentDidMount: function() {
NetInfo.addEventListener(
'change',
this._handleConnectionChange
);
NetInfo.fetch().done(
(netInfo) => { this.setState({netInfo}); }
);
},
componentWillUnmount: function() {
NetInfo.removeEventListener(
'change',
this._handleConnectionChange
);
},
_handleConnectionChange: function(netInfo) {
this.setState({
netInfo,
});
},
render() {
return (
<Text>{JSON.stringify(this.state.netInfo)}</Text>
);
}
});
const IsConnected = React.createClass({
getInitialState() {
return {
isConnected: null,
};
},
componentDidMount: function() {
NetInfo.isConnected.addEventListener(
'change',
this._handleConnectivityChange
);
NetInfo.isConnected.fetch().done(
(isConnected) => { this.setState({isConnected}); }
);
},
componentWillUnmount: function() {
NetInfo.isConnected.removeEventListener(
'change',
this._handleConnectivityChange
);
},
_handleConnectivityChange: function(isConnected) {
this.setState({
isConnected,
});
},
render() {
return (
<Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
);
}
});
const NetInfoExample = React.createClass({
statics: {
title: '<NetInfo>',
description: 'Monitor network status.'
},
getInitialState() {
return {
isMetered: null,
};
},
render() {
return (
<View >
<Text> Is Connected: <IsConnected /> </Text>
<Text> Current Connection Type: <ConnectionCurrent /> </Text>
<Text> Connection History: <ConnectionSubscription /> </Text>
<TouchableWithoutFeedback onPress={this.isConnectionMetered}>
<View>
<Text>Click to see if connection is metered: {this.state.isMetered}</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
},
isConnectionMetered: function() {
NetInfo.isConnectionMetered((isConnectionMetered) => {
this.setState({
isMetered: isConnectionMetered ? 'Is Metered' : 'Is Not Metered',
});
});
}
});
module.exports = NetInfoExample;

147
Examples/UIExplorer/NetInfoExample.ios.js
View File

@@ -1,147 +0,0 @@
/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* @flow
*/
'use strict';
var React = require('react-native');
var {
NetInfo,
Text,
View
} = React;
var ReachabilitySubscription = React.createClass({
getInitialState() {
return {
reachabilityHistory: [],
};
},
componentDidMount: function() {
NetInfo.addEventListener(
'change',
this._handleReachabilityChange
);
},
componentWillUnmount: function() {
NetInfo.removeEventListener(
'change',
this._handleReachabilityChange
);
},
_handleReachabilityChange: function(reachability) {
var reachabilityHistory = this.state.reachabilityHistory.slice();
reachabilityHistory.push(reachability);
this.setState({
reachabilityHistory,
});
},
render() {
return (
<View>
<Text>{JSON.stringify(this.state.reachabilityHistory)}</Text>
</View>
);
}
});
var ReachabilityCurrent = React.createClass({
getInitialState() {
return {
reachability: null,
};
},
componentDidMount: function() {
NetInfo.addEventListener(
'change',
this._handleReachabilityChange
);
NetInfo.fetch().done(
(reachability) => { this.setState({reachability}); }
);
},
componentWillUnmount: function() {
NetInfo.removeEventListener(
'change',
this._handleReachabilityChange
);
},
_handleReachabilityChange: function(reachability) {
this.setState({
reachability,
});
},
render() {
return (
<View>
<Text>{this.state.reachability}</Text>
</View>
);
}
});
var IsConnected = React.createClass({
getInitialState() {
return {
isConnected: null,
};
},
componentDidMount: function() {
NetInfo.isConnected.addEventListener(
'change',
this._handleConnectivityChange
);
NetInfo.isConnected.fetch().done(
(isConnected) => { this.setState({isConnected}); }
);
},
componentWillUnmount: function() {
NetInfo.isConnected.removeEventListener(
'change',
this._handleConnectivityChange
);
},
_handleConnectivityChange: function(isConnected) {
this.setState({
isConnected,
});
},
render() {
return (
<View>
<Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
</View>
);
}
});
exports.title = 'NetInfo';
exports.description = 'Monitor network status';
exports.examples = [
{
title: 'NetInfo.isConnected',
description: 'Asynchronously load and observe connectivity',
render(): ReactElement { return <IsConnected />; }
},
{
title: 'NetInfo.reachabilityIOS',
description: 'Asynchronously load and observe iOS reachability',
render(): ReactElement { return <ReachabilityCurrent />; }
},
{
title: 'NetInfo.reachabilityIOS',
description: 'Observed updates to iOS reachability',
render(): ReactElement { return <ReachabilitySubscription />; }
},
];

182
Examples/UIExplorer/NetInfoExample.js Normal file
View File

@@ -0,0 +1,182 @@
/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* @flow
*/
'use strict';
const React = require('react-native');
const {
NetInfo,
Text,
View,
TouchableWithoutFeedback,
} = React;
const ConnectionInfoSubscription = React.createClass({
getInitialState() {
return {
connectionInfoHistory: [],
};
},
componentDidMount: function() {
NetInfo.addEventListener(
'change',
this._handleConnectionInfoChange
);
},
componentWillUnmount: function() {
NetInfo.removeEventListener(
'change',
this._handleConnectionInfoChange
);
},
_handleConnectionInfoChange: function(connectionInfo) {
const connectionInfoHistory = this.state.connectionInfoHistory.slice();
connectionInfoHistory.push(connectionInfo);
this.setState({
connectionInfoHistory,
});
},
render() {
return (
<View>
<Text>{JSON.stringify(this.state.connectionInfoHistory)}</Text>
</View>
);
}
});
const ConnectionInfoCurrent = React.createClass({
getInitialState() {
return {
connectionInfo: null,
};
},
componentDidMount: function() {
NetInfo.addEventListener(
'change',
this._handleConnectionInfoChange
);
NetInfo.fetch().done(
(connectionInfo) => { this.setState({connectionInfo}); }
);
},
componentWillUnmount: function() {
NetInfo.removeEventListener(
'change',
this._handleConnectionInfoChange
);
},
_handleConnectionInfoChange: function(connectionInfo) {
this.setState({
connectionInfo,
});
},
render() {
return (
<View>
<Text>{this.state.connectionInfo}</Text>
</View>
);
}
});
const IsConnected = React.createClass({
getInitialState() {
return {
isConnected: null,
};
},
componentDidMount: function() {
NetInfo.isConnected.addEventListener(
'change',
this._handleConnectivityChange
);
NetInfo.isConnected.fetch().done(
(isConnected) => { this.setState({isConnected}); }
);
},
componentWillUnmount: function() {
NetInfo.isConnected.removeEventListener(
'change',
this._handleConnectivityChange
);
},
_handleConnectivityChange: function(isConnected) {
this.setState({
isConnected,
});
},
render() {
return (
<View>
<Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
</View>
);
}
});
const IsConnectionExpensive = React.createClass({
getInitialState() {
return {
isConnectionExpensive: null,
};
},
_checkIfExpensive() {
NetInfo.isConnectionExpensive(
(isConnectionExpensive) => { this.setState({isConnectionExpensive}); }
);
},
render() {
return (
<View>
<TouchableWithoutFeedback onPress={this._checkIfExpensive}>
<View>
<Text>Click to see if connection is expensive:
{this.state.isConnectionExpensive === true ? 'Expensive' :
this.state.isConnectionExpensive === false ? 'Not expensive'
: 'Unknown'}
</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
}
});
exports.title = 'NetInfo';
exports.description = 'Monitor network status';
exports.examples = [
{
title: 'NetInfo.isConnected',
description: 'Asynchronously load and observe connectivity',
render(): ReactElement { return <IsConnected />; }
},
{
title: 'NetInfo.update',
description: 'Asynchronously load and observe connectionInfo',
render(): ReactElement { return <ConnectionInfoCurrent />; }
},
{
title: 'NetInfo.updateHistory',
description: 'Observed updates to connectionInfo',
render(): ReactElement { return <ConnectionInfoSubscription />; }
},
{
platform: 'android',
title: 'NetInfo.isConnectionExpensive (Android)',
description: 'Asycnronously check isConnectionExpensive',
render(): ReactElement { return <IsConnectionExpensive />; }
},
];

2
Examples/UIExplorer/UIExplorerList.android.js
View File

@@ -43,7 +43,7 @@ var APIS = [
require('./IntentAndroidExample.android'),
require('./LayoutEventsExample'),
require('./LayoutExample'),
require('./NetInfoExample.android'),
require('./NetInfoExample'),
require('./PanResponderExample'),
require('./PointerEventsExample'),
require('./TimerExample'),

2
Examples/UIExplorer/UIExplorerList.ios.js
View File

@@ -68,7 +68,7 @@ var APIS = [
require('./CameraRollExample.ios'),
require('./GeolocationExample'),
require('./LayoutExample'),
require('./NetInfoExample.ios'),
require('./NetInfoExample'),
require('./PanResponderExample'),
require('./PointerEventsExample'),
require('./PushNotificationIOSExample'),